版权声明：本文为博主原创文章，未经博主允许不得转载： https://blog.csdn.net/sinat_33381791/article/details/83062539
简介
目的：展示Ajax请求的array数据，我们在开发中场用的Ajax网络请求然后进行对Array数据遍历展示在前端页面中，到后期如果使用Vue.js、angular2.js等双向绑定数据的话，就不需要进行这样的遍历方式。后期文章会讲解Vue开发APP。
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!');
}
});
}
展示页面
如图所示展示结果
分析
1、这里需要注意的是循环获取数据的时候需要在标签下进行插入数据如demo.js
2、数据获取for循环的时候，添加数据时要注意，避免错误。