异步请求(解析json数据)-白红宇

异步请求(解析json数据)

阅读量：6379 次

发布时间：2019-06-23

本文共 4875 字，大约阅读时间需要 16 分钟。

将 json 数据显示到页面

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

Demo: 查询一个雇员的信息

html:

1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2     pageEncoding="UTF-8"%> 3  4  5  6     
      7     
      8     Insert title here 9     10     
     11     
     12     
     13     14     
     15     16     
     17     18     
     19     20     
     21     
     22     
     23     24 25 26     获取一个雇员信息
27     获取多个雇员信息28     
     
      29         
      
       30             
       
        31                 
        
         32                     
           33 
34 
35                 
                              编号            姓名            职位            薪资            领导编号            入职日期            佣金            部门编号            操作           
         
        
36             
       
37         
      
38     
     
39 40

$(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(""+                    ""+data.empno+""+                    ""+data.ename+""+                    ""+data.job+""+                    ""+data.sal+""+                    ""+data.mgr+""+                    ""+data.hiredate+""+                    ""+data.comm+""+                    ""+data.deptno+""+                    ""+                "")            }        })    })})

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[i].empno+""+                        ""+data[i].ename+""+                        ""+data[i].job+""+                        ""+data[i].sal+""+                        ""+data[i].mgr+""+                        ""+data[i].hiredate+""+                        ""+data[i].comm+""+                        ""+data[i].deptno+""+                        "
      "+                    "")                }            }        })    })})

each循环:

$.each(data,function(index){    $("table").append(""+        ""+data[i].empno+""+        ""+data[i].ename+""+        ""+data[i].job+""+        ""+data[i].sal+""+        ""+data[i].mgr+""+        ""+data[i].hiredate+""+        ""+data[i].comm+""+        ""+data[i].deptno+""+        ""+    "")})

Demo: 解析 Map 类型的 json 数据

jsp:

    获取一个雇员信息
    获取多个雇员信息

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(""+key+"
");19                         //生成每个表格的表头信息(每个表格保存一种职位的雇员信息)20                         $("#div1").append(21                                 "
     
      "+22                                     "
        "+23                                         "
"+24                                     "
"+25                                 "
                     编号         姓名         职位         薪资         领导编号         入职日期         佣金         部门编号         操作        
      
     
"26                         );27                         //对当前职位的雇员列表进行迭代28                         //value: 当前职位的雇员集合29                         //index: 动态产生的下标, 从0开始30                         $.each(value,function(index){31                             $("#"+key).append(""+32                                 ""+value[index].empno+""+33                                 ""+value[index].ename+""+34                                 ""+value[index].job+""+35                                 ""+value[index].sal+""+36                                 ""+value[index].mgr+""+37                                 ""+value[index].hiredate+""+38                                 ""+value[index].comm+""+39                                 ""+value[index].deptno+""+40                                 ""+41                             "")42                         })43                     }44                 })45             }46         })47     })48 })