码迷,mamicode.com
首页 > Web开发 > 详细

异步请求(解析json数据)

时间:2019-05-10 20:46:17      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:doc   数据显示   ble   src   类型   nbsp   .ajax   自适应   mvc   

将 json 数据显示到页面
  需要借助 js 对 dom 的操作功能将数据生成到 html 页面

Demo: 查询一个雇员的信息
html:

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6     <meta content="utf-8">
 7     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 8     <title>Insert title here</title>
 9     <base href="/MvcPro/"/>
10     <!--表示样式可以根据设备的大小自适应-->
11     <meta name="viewport" content="width=divce-width,initial-scale=1">
12     <!-- 导入 jq 的 js 文件 -->
13     <script src="js/jquery.min.js"></script>
14     <!-- 导入表单验证的开发包 -->
15     <script type="text/javascript" src="js/jquery.validate.min.js"></script>
16     <!-- 导入表单验证 -->
17     <script src="pages/verification.js"></script>
18     <!--导入bootstrap的js-->
19     <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
20     <!--导入bootstrap的css文件-->
21     <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
22     <!-- 导入自定义js文件 -->
23     <script src="pages/index.js"></script>
24 </head>
25 <body>
26     <a href="javascript:void(0)">获取一个雇员信息</a><br>
27     <a href="javascript:void(0)">获取多个雇员信息</a>
28     <div class="container">
29         <div class="row">
30             <div class="col-md-8">
31                 <table class="table table-bordered table-striped table-condensed table-hover">
32                     <tr>
33                         <th>编号</th><th>姓名</th><th>职位</th><th>薪资</th><th>领导编号</th><th>入职日期</th><th>佣金</th><th>部门编号</th><th>操作</th>
34                     </tr>
35                 </table>
36             </div>
37         </div>
38     </div>
39 </body>
40 </html>

js

$(function(){
    var emp;
    //为超链接绑定事件
    $("a:eq(0)").click(function(){
        $("table tr:eq(1)").remove();
        //发送异步请求
        $.ajax({
            type:"post",
            url:"emp/getOne",
            data:"id=7788",
            dataType:"json",
            async:false,
            success:function(data){
                //取得表格元素对象
                var table=$("table");
                table.append("<tr>"+
                    "<td>"+data.empno+"</td>"+
                    "<td>"+data.ename+"</td>"+
                    "<td>"+data.job+"</td>"+
                    "<td>"+data.sal+"</td>"+
                    "<td>"+data.mgr+"</td>"+
                    "<td>"+data.hiredate+"</td>"+
                    "<td>"+data.comm+"</td>"+
                    "<td>"+data.deptno+"</td>"+
                    "<td><button class=‘btn btn-success btn-sx‘>删除</button></td>"+
                "</tr>")
            }
        })
    })
})

Demo: 解析 List 类型的 json 数据

$(function(){
    $("a:eq(1)").click(function(){
        var table=$("table");
        $("table tr:gt(0)").remove();
        $.ajax({
            type:"post",
            url:"emp/jsonList",
            data:"cp=1&ls=10&kw=A",
            dataType:"json",
            success:function(data){
                for(var i=0;i<data.length;i++){
                    $("table").append("<tr>"+
                        "<td>"+data[i].empno+"</td>"+
                        "<td>"+data[i].ename+"</td>"+
                        "<td>"+data[i].job+"</td>"+
                        "<td>"+data[i].sal+"</td>"+
                        "<td>"+data[i].mgr+"</td>"+
                        "<td>"+data[i].hiredate+"</td>"+
                        "<td>"+data[i].comm+"</td>"+
                        "<td>"+data[i].deptno+"</td>"+
                        "<td><button class=‘btn btn-success btn-sx‘>删除</button></td>"+
                    "</tr>")
                }
            }
        })
    })
})

each循环:

$.each(data,function(index){
    $("table").append("<tr>"+
        "<td>"+data[i].empno+"</td>"+
        "<td>"+data[i].ename+"</td>"+
        "<td>"+data[i].job+"</td>"+
        "<td>"+data[i].sal+"</td>"+
        "<td>"+data[i].mgr+"</td>"+
        "<td>"+data[i].hiredate+"</td>"+
        "<td>"+data[i].comm+"</td>"+
        "<td>"+data[i].deptno+"</td>"+
        "<td><button class=‘btn btn-success btn-sx‘>删除</button></td>"+
    "</tr>")
})

Demo: 解析 Map 类型的 json 数据
jsp:

<body>
    <a href="javascript:void(0)">获取一个雇员信息</a><br>
    <a href="javascript:void(0)">获取多个雇员信息</a>
    <div class="container">
        <div class="row">
            <div id="div1" class="col-md-8">
            </div>
        </div>
    </div>
</body>

js:

 1 $(function(){
 2     $("a:eq(1)").click(function(){
 3         var table=$("table");
 4         $("table tr:gt(0)").remove();
 5         $.ajax({
 6             type:"post",
 7             url:"emp/jsonMap",
 8             data:"cp=1&ls=10&kw=",
 9             dataType:"json",
10             success:function(data){
11                 $("table").remove();
12                 $("h1").remove();
13                 //迭代map集合
14                 $.each(data,function(key,value){
15                     //过滤掉不是value值不是集合的键值对
16                     if(key!=‘allPages‘&&key!=‘count‘&&key!=‘cp‘&&key!=‘ls‘&&key!=‘kw‘){
17                         //生成职位信息
18                         $("#div1").append("<h1>"+key+"</h1>");
19                         //生成每个表格的表头信息(每个表格保存一种职位的雇员信息)
20                         $("#div1").append(
21                                 "<table class=‘table table-bordered table-striped table-condensed table-hover‘ id=‘"+key+"‘ border=1>"+
22                                     "<tr>"+
23                                         "<th>编号</th><th>姓名</th><th>职位</th><th>薪资</th><th>领导编号</th><th>入职日期</th><th>佣金</th><th>部门编号</th><th>操作</th>"+
24                                     "</tr>"+
25                                 "</table>"
26                         );
27                         //对当前职位的雇员列表进行迭代
28                         //value: 当前职位的雇员集合
29                         //index: 动态产生的下标, 从0开始
30                         $.each(value,function(index){
31                             $("#"+key).append("<tr>"+
32                                 "<td>"+value[index].empno+"</td>"+
33                                 "<td>"+value[index].ename+"</td>"+
34                                 "<td>"+value[index].job+"</td>"+
35                                 "<td>"+value[index].sal+"</td>"+
36                                 "<td>"+value[index].mgr+"</td>"+
37                                 "<td>"+value[index].hiredate+"</td>"+
38                                 "<td>"+value[index].comm+"</td>"+
39                                 "<td>"+value[index].deptno+"</td>"+
40                                 "<td><button class=‘btn btn-success btn-sx‘>删除</button></td>"+
41                             "</tr>")
42                         })
43                     }
44                 })
45             }
46         })
47     })
48 })

 

异步请求(解析json数据)

标签:doc   数据显示   ble   src   类型   nbsp   .ajax   自适应   mvc   

原文地址:https://www.cnblogs.com/yslf/p/10846515.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!