【JSONArray】
[{"ID":1,"birthdate":"1989-10-14","nationality":"Australia","username":"Mia Wasikowska"},
{"ID":2,"birthdate":"1963-06-09","nationality":"USA","username":"Johnny Depp"},
{"ID":3,"birthdate":"1966-05-26","nationality":"England","username":"Helena Bonham Carter"},
{"ID":4,"birthdate":"1982-11-12","nationality":"NewYork","username":"Anne Hathaway"},
{"ID":5,"birthdate":"1969-02-05","nationality":"England","username":"Michael Sheen"},
{"ID":6,"birthdate":"1964-04-20","nationality":"USA","username":"Crispin Glover"},
{"ID":7,"birthdate":"1958-08-25","nationality":"USA","username":"Tim Burton"}]
【Table】
<body>
<table id="tbl" align="center">
<caption>User Account Information</caption>
<tr>
<th>ID</th>
<th>UserName</th>
<th>Birthdate</th>
<th>Nationality</th>
</tr>
</table>
</body>
【Ajax】
总体结构如下
<script type="text/javascript">
window.onload = function () {
$.ajax({
type:"post",
url:"TableDemoServlet",
async:true, //默认-异步(true) 同步-false
dataType:"json",
success:function (dataArray) {
//解析JSON数据dataArray,并显示到Table上
},
error:function (e) {
alert("错误!"+e.status);
},
complete:function () {
}
});
}
</script>
- approach1 - for(i) 循环取值,dataArray[i]['key']取值
//dataArray.length是JSONArray数组中的对象个数
for (var i = 0; i < dataArray.length; i++) {
var tr;
//注意这里[tr=]不要写成[tr+=]
tr = "<td>"+dataArray[i]['ID']+"</td>";
tr += "<td>"+dataArray[i]['username']+"</td>";
tr += "<td>"+dataArray[i]['birthdate']+"</td>";
tr += "<td>"+dataArray[i]['nationality']+"</td>";
//将语句拼接到<table>中显示
$("#tbl").append("<tr>"+tr+"</tr>");
}
- approach2 - for(i in dataArray),dataArray[i].key 取值
for(i in dataArray){
var tr;
tr = "<td>"+dataArray[i].ID+"</td>";
tr += "<td>"+dataArray[i].username+"</td>";
tr += "<td>"+dataArray[i].birthdate+"</td>";
tr += "<td>"+dataArray[i].nationality+"</td>";
$("#tbl").append("<tr>"+tr+"</tr>");
}
- approach3 - each(JSONArray,function(index,item))
$.each(dataArray,function (index,item) {
var tr;
tr += "<td>" + item.ID + "</td>";
tr += "<td>" + item.username + "</td>";
tr += "<td>" + item.birthdate + "</td>";
tr += "<td>" + item.nationality + "</td>";
$("#tbl").append("<tr>"+tr+"</tr>");
})
取值的方式主要有两种
- dataArray[i].key
- dataArray[i]['key']
【完整代码】
<%--
Created by IntelliJ IDEA.
User: Coraline
Date: 2018/8/29
Time: 10:55
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>TableDemo</title>
<script src="./scripts/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function () {
//解析JSONArray,并显示到Table上
//----------------------第一种方式---------------------------------
function approach1(dataArray){
//dataArray.length是JSONArray数组中的对象个数
for (var i = 0; i < dataArray.length; i++) {
var tr;
//注意这里[tr=]不要写成[tr+=]
tr = "<td>"+dataArray[i]['ID']+"</td>";
tr += "<td>"+dataArray[i]['username']+"</td>";
tr += "<td>"+dataArray[i]['birthdate']+"</td>";
tr += "<td>"+dataArray[i]['nationality']+"</td>";
//将语句拼接到<table>中显示
$("#tbl").append("<tr>"+tr+"</tr>");
}
}
//-----------------------第二种方式--for-in----------------------------
function approach2(dataArray){
// data.data指的是数组,数组里是7个对象,i为数组的索引
for(i in dataArray){
var tr;
tr = "<td>"+dataArray[i].ID+"</td>";
tr += "<td>"+dataArray[i].username+"</td>";
tr += "<td>"+dataArray[i].birthdate+"</td>";
tr += "<td>"+dataArray[i].nationality+"</td>";
$("#tbl").append("<tr>"+tr+"</tr>");
}
}
//-----------------------第三种方式---each----------------------------
function approach3(dataArray){
$.each(dataArray,function (index,item) {
var tr;
tr += "<td>" + item.ID + "</td>";
tr += "<td>" + item.username + "</td>";
tr += "<td>" + item.birthdate + "</td>";
tr += "<td>" + item.nationality + "</td>";
$("#tbl").append("<tr>"+tr+"</tr>");
})
}
$.ajax({
type:"post",
url:"TableDemoServlet",
async:true, //默认-异步(true) 同步-false
dataType:"json",
success:function (dataArray) {
//---第一种方式---
// approach1(dataArray);
//---第二种方式--for-in---
// approach2(dataArray);
//---第三种方式---each---
approach3(dataArray);
},
error:function (e) {
alert("错误!"+e.status);
},
complete:function () {
}
});
}
</script>
</head>
<body>
<table id="tbl" align="center">
<caption>User Account Information</caption>
<tr>
<th>ID</th>
<th>UserName</th>
<th>Birthdate</th>
<th>Nationality</th>
</tr>
</table>
</body>
</html>
【参考】
jquery如何通过ajax请求获取后台数据显示在表格上