jquery通過json從資料庫中返回一條資料和其對應的多條資料
最近在用jquery框架做專案,整個專案全部採用AJAX技術,用JSON做資料交換,下面的例子是一對多的關係,從資料庫中查出一條主資料,然後顯示這條主資料對應的多條其它資料,如下所示:
json.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
{
"name":"賣咖啡",
"sex":"男",
"age":"26",
"award":
[
{
"awardDate" : "2001-01-15",
"awardName" : "國際舞蹈大賽金獎",
"awardAgent" : "國際舞聯"
},
{
"awardDate" : "2003-07-23",
"awardName" : "中國舞蹈大賽金獎",
"awardAgent" : "中國舞聯"
},
{
"awardDate" : "2008-09-28",
"awardName" : "歐洲舞蹈大賽金獎",
"awardAgent" : "歐洲舞聯"
}
]
}
jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<html>
<head>
<title></title>
<script type="text/javascript" src="<%=path%>/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var url="<%=path%>/json/json.jsp";
$("#button").click(function(){
$.getJSON(
url,
function(data){
$("#detail").empty();
$("#list").empty();
var detailHtml='';
detailHtml += '<table width="400" border="1">';
detailHtml += ' <tr>';
detailHtml += ' <td>姓名</td>';
detailHtml += ' <td>性別</td>';
detailHtml += ' <td>年齡</td>';
detailHtml += ' </tr>';
detailHtml += ' <tr>';
detailHtml += ' <td>'+data.name+'</td>';
detailHtml += ' <td>'+data.sex+'</td>';
detailHtml += ' <td>'+data.age+'</td>';
detailHtml += ' </tr>';
detailHtml += '</table></br>';
$('#detail').append(detailHtml);
var listHtml='';
listHtml += '<table width="400" border="1">';
listHtml += ' <tr>';
listHtml += ' <td>獲獎時間</td>';
listHtml += ' <td>獲獎名稱</td>';
listHtml += ' <td>獲獎機構</td>';
listHtml += ' </tr>';
$.each(data.award,function(entryIndex,entry){
listHtml += ' <tr>';
listHtml += ' <td>'+entry['awardDate']+'</td>';
listHtml += ' <td>'+entry['awardName']+'</td>';
listHtml += ' <td>'+entry['awardAgent']+'</td>';
listHtml += ' </tr>';
});
listHtml += '</table>';
$('#list').append(listHtml);
});
});
});
</script>
</head>
<body>
<button id="button">讀取</button>
<div id="detail"></div>
<div id="list"></div>
</body>
</html>
實現效果:
