Json数据异步绑定到界面的Table并且自动刷新
做Winform习惯了，大家都习惯设置datasource这样的写法。
如果想实现页面定时刷新的话，用.net给封装好的updatepanel和timer两个控件实现起来其实挺容易的。这样做加入了很多你不能控制的元素，举个例子说就是：用updatepanel后，你设置的样式很有可能就变了，然后你还需要去调这些。所以还是用一些自己控制性高的代码比较合适。
今天就先从这个updatepanel加timer实现页面自动刷新这个例子来下手吧。
首先来看一下我的一般处理程序，在这个里面，我自己实现的是从数据库中查出datatable，然后转换成json传输给客户端
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>测试</title> <script src="jquery-1.7.1.js" type="text/javascript"></script></head><body> <form id="form1" runat="server"> <table id="data"> <tr id="tem"> <td id="ID"> 流水号 </td> <td id="CarNumber"> 车牌号 </td> <td id="BusinessName"> 业务类型 </td> <td id="btn"> <input id="Button2" type="button" value="button" /> </td> </tr> </table> <div id="loading"> 正在加载数据... </div> <script type="text/jscript"> //模拟一个数据正在加载的样子 setTimeout(function () { $("#loading").hide(); }, 1000); //设置定时器定时调用方法，单位是毫秒 setInterval(SetData(), 1000); //从服务器端获取数据，并显示到界面上,用getJSON方法实现 function SetData() { $.getJSON("getData.ashx", null, function (obj) { $("tr").eq(0).nextAll().remove(); //将除模板行的tr删除 //将获取到的数据动态的加载到table中 for (var i = 0; i < obj.length; i++) { //将第四条的ID设置为红色（此处可以用来根据内容修改样式 if (i == 3) { row.find("#ID").css("color", "red"); } //获取模板行，复制一行 var row = $("#tem").clone(); //将新一行的按钮添加click事件 row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation); //注意：在jquery1.4.2中，上面的方法会出错，具体原因我也不知道，反正1.7.1这样写是没有问题的 //如果上面代码不行，你可以试一下 //row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation); //亲测上面的代码在1.4.2.min...中可以运行，这个问题的解决浪费了很长事件，都怪用了比较老的框架 row.find("#ID").text(obj[i].CKRID); //流水号 row.find("#CarNumber").text(obj[i].CHRCARNUMBER); //汽车车牌号 row.find("#BusinessName").text(obj[i].BCRNAME); //所办理的业务名称 //将新行添加到表格中 row.appendTo("#data"); } }); } //获取传过来的参数并显示 function operation(event) { alert(event.data.name); alert(event.data.back); } //从服务器端获取数据，并显示到界面上,用ajax方法实现 function SetDataByAjax() { $.ajax({ type: "get", //设置调用类型 dataType: "json", //设置数据类型 url: "getData.ashx", //url complete: function () { $("#loading").hide() }, success: function (obj) { $("tr").eq(0).nextAll().remove(); //将除模板行的tr删除 //将获取到的数据动态的加载到table中 for (var i = 0; i < obj.length; i++) { //将第四条的ID设置为红色（此处可以用来根据内容修改样式 if (i == 3) { row.find("#ID").css("color", "red"); } //获取模板行，复制一行 var row = $("#tem").clone(); //将新一行的按钮添加click事件 row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation); //注意：在jquery1.4.2中，上面的方法会出错，具体原因我也不知道，反正1.7.1这样写是没有问题的 //如果上面代码不行，你可以试一下 //row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation); //亲测上面的代码在1.4.2中可以运行，这个问题的解决浪费了很长事件，都怪用了比较老的框架 row.find("#ID").text(obj[i].CKRID); //流水号 row.find("#CarNumber").text(obj[i].CHRCARNUMBER); //汽车车牌号 row.find("#BusinessName").text(obj[i].BCRNAME); //所办理的业务名称 //将新行添加到表格中 row.appendTo("#data"); } } }); } </script> </form></body></html>一个getJson方法，只需要给3个参数，他就把创建对象、回调函数、设置参数等全部操作就都给你做了。这个还是值得学习的，在平时的学习中，对于常用到的东西，应该考虑将其提炼成一个方法，放到自己的小小代码库中。
虽然上面的代码不是很难，可是个人感觉这是我对于ajax理解的一个里程碑例子，一个例子，解开了我好多曾经的疑雾。