<script type="text/javascript"> $(document).ready(function () { $.ajax({ type: "get", dataType: "Json", url: "../Ashx/Handler1.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>