Ajax Success之后 动态加载实现后端传的list数据
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<script src="jquery.min.js"></script>
</head>
<table>
<thead>
<tr>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>...</th>
</tr>
</thead>
<tbody class="table_node">
<tr class="node" >
<!--动态载入数据部分-->
</tr>
</tbody>
</table>
</body>
</html>
Js文件
/**
* 自动加载规则信息,加载到01234..下面
*/
window.onload = function () {
$.ajax({
type: 'GET',
url: "",
contentType: "application/json;cherset=utf-8",
dataType: "json",
success: function (data)
$('.node').empty()
//取出后端传过来的list值
var list = data.data
//对list值进行便利
$.each(list, function (index, n) {
var rowTr = document.createElement('tr')
//找到html的tr节点
rowTr.className = "node"
var child = "<td>" + list[index].0+ "</td>"
+ "<td>" + list[index].1+ "</td>"
+ "<td>" + list[index].2+ "</td>"
+ "<td>" + list[index].3+ "</td>"
+ "<td>" + list[index].4+ "</td>"...等等
//将要展示的信息写入页面
rowTr.innerHTML = child
//将信息追加
$(".node").append(rowTr)
});
}
});
}