<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "get",
dataType: "Json",
url: "../data/list.ashx",
start: function () { alert("开始获取数据了") },
complete: function () { alert("获取完了") },
success: function (data) {
var t = eval(data); //强制转换一下json字符串,生成json对象
$.each(t, function (i, n) {
var row = $("#template").clone(); //克隆模板,创建一个新数据行
for (attribute in n) {
row.find("#" + attribute).html(n[attribute]); //循环json对象的属性,并赋值到数据行中对应的列,此处列的id就是相应的属性名称
}
row.appendTo($("#testTable"));
});
}
});
});
</script>
<table id="testTable" border="1">
<th style="width: 30%">编号</th>
<th style="width: 30%">标题</th>
<th style="width: 30%">内容</th>
<!--数据模板-->
<!--其中每一列的id就是对应记录中的列名-->
<tr id="template">
<td id="Id" style="width: 30%"></td>
<td id="title" style="width: 30%"></td>
<td id="intro" style="width: 30%"></td>
</tr>
<!--数据模板-->
</table>
jquery+Ajax+Json 绑定数据
最新推荐文章于 2021-08-05 14:41:20 发布