将 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 })