将 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 })
原文地址：https://www.cnblogs.com/yslf/p/10846515.html
时间： 2024-10-10 06:37:18