jquery通过json从数据库中返回一条数据和其对应的多条数据

最新推荐文章于 2022-06-29 21:48:09 发布

iteye_19679

最新推荐文章于 2022-06-29 21:48:09 发布

阅读量350

点赞数

分类专栏： JSON 文章标签： json jQuery JSP JavaScript Ajax ViewUI

本文链接：https://blog.csdn.net/iteye_19679/article/details/81895135

版权

JSON 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jquery通过json从数据库中返回一条数据和其对应的多条数据

2009年03月03日星期二下午 11:05

最近在用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>