目的：展示Ajax请求的array数据
1、ajax网络请求获取数据
2、展示数组数据
3、注意事项
下面是index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=1.0, user-scalable=no"/>
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/pintuer.css">
<link rel="stylesheet" href="css/myAlert.css">
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/Common/commonApi.js"></script>
<script type="text/javascript" src="js/myAlert.js"></script>
<script type="text/javascript" src="js/page/jquery.pagination.js"></script>
</head>
<body>
<div class="panel admin-panel">
<table class="table table-hover text-center addr_title">
<tr>
<th width="10%">Num</th>
<th width="40%">Address</th>
<th width="15%">DateTime</th>
</tr>
<!-- <tr class="addr_info">
<td class="num">1</td>
<td class="address_info">1ojfosfjosifjsofnscjsjiszczc</td>
<td class="date_time">2018-06-11</td>
</tr>-->
<!--<tr class="addr_list">
<td class="num">1</td>
<td class="address_info">1ojfosfjosifjsofnscjsjiszczc</td>
<td class="address_balance">0.0000</td>
<td class="address_note">焦点</td>
</tr>-->
</table>
<div class="page_num">
<div class="m-style M-box"></div>
</div>
</div>
</body>
<script type="text/javascript" src="js/demo.js"></script>
</html>
下面是demo.js,这里是数据展示的核心代码
var page = 1;
var isPage = false;
function getNewAddress(page) {
$.ajax({
type: "GET",
url: GET_NEW_ADDRESS + page,
header: {
contentType: "application/json;charset=UTF-8"
},
dataType: "json",
success: function (data) {
// alert(JSON.stringify(data));
$(".list_th").remove();
if (0 === data.code) {
console.info(data.data)
var content = data.data.content;获取array数据
var pageCount = data.data.totalPages;//
var html = "";
//循环获取数据展示
$.each(content, function (i, value) {
var list_th = " <tr class='list_th'>\n" +
" <td class=\"num\">" +
((page - 1) * 10 + i + 1) +
"</td>\n" +
" <td class=\"address_info\">" +
value.newAddress +
"</td>\n" +
"<td class=\"date_time\">" +
value.dateTime +
"</td>" +
" </tr>";
html += list_th;
});
$(".addr_title").append(html);//追加到标签最后
if (!isPage) {
isPage = true;
//showPageAll(pageCount);//分页
}
} else {
$.myFailTip('Getnewaddress fail!');
}
},
error: function (data) {
console.log("getnewaddress: " + JSON.stringify(data));
$.myFailTip('getnewaddress fail!');
}
});
}
如图所示展示结果
展示.png
分析
1、这里需要注意的是循环获取数据的时候需要在标签下进行插入数据如demo.js
2、数据获取for循环的时候，添加数据时要注意，避免错误。
网友评论