Json数据异步绑定到界面的Table并且自动刷新

转自：http://blog.csdn.net/jianxin1009/article/details/8565828‘

做Winform习惯了，大家都习惯设置datasource这样的写法。

如果想实现页面定时刷新的话，用.net给封装好的updatepanel和timer两个控件实现起来其实挺容易的。这样做加入了很多你不能控制的元素，举个例子说就是：用updatepanel后，你设置的样式很有可能就变了，然后你还需要去调这些。所以还是用一些自己控制性高的代码比较合适。

今天就先从这个updatepanel加timer实现页面自动刷新这个例子来下手吧。

首先来看一下我的一般处理程序，在这个里面，我自己实现的是从数据库中查出datatable，然后转换成json传输给客户端

1. /// <summary>
2. /// getData 的摘要说明
3. /// </summary>
4. public class getData : IHttpHandler
5. {
6. public void ProcessRequest(HttpContext context)
7. {
8. context.Response.ContentType = "text/plain";
9. //context.Response.Write("Hello World");
10. //设置查询字符串
11. string strSql = "select ckrID,chrCarNumber,cncName,bcrName from T_CarNumberCategory,T_CheckResult,t_BusinessCategory where ckrcheckresult is null and cncID=ckrcarnumbercategoryid and ckrBusinessCategory=bcrID";
12. //设置连接字符串
13. string strConn = "Data Source=(DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=192.168.24.173)(PORT=1521))(CONNECT_DATA=(SERVICE_NAME=ORCL)));User Id=admin;Password=123123";
14. //定义并打开数据库连接
15. OracleConnection conn = new OracleConnection(strConn);
16. conn.Open();
17. //定义命令行对象，
18. OracleCommand cmd = new OracleCommand(strSql, conn);
19. //定义一个适配器，用来填充Datatable            ;
20. OracleDataAdapter adp = new OracleDataAdapter(cmd);
21. //定义一个DataTable并用适配器对其进行填充
22. DataTable dt = new DataTable();
23. adp.Fill(dt);
24. context.Response.Write(JsonConvert.SerializeObject(dt));
25. //上面的是我从数据库中查询到的datatable，然后用一个Json操作类库将其转换为Json
26. ////由于大家没有数据库环境，我把上面的字符串复制出来，供大家测试实验用
27. ////由于复制出来是双引号，放这里会报个错误，所以我改成单引号了
28. ////但是客户端在获取json的时候，是认双引号的，所以不得不再替换回来。。。心碎
29. //var json = "[{'CKRID':'1359374764563','CHRCARNUMBER':'123123','CNCNAME':'大型汽车','BCRNAME':'核发检验合格标志'},{'CKRID':'1359371470153','CHRCARNUMBER':'asdfsadf','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1359343210678','CHRCARNUMBER':'111222','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1359354395618','CHRCARNUMBER':'123asd','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1359355217314','CHRCARNUMBER':'123asdqwe','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1359355356271','CHRCARNUMBER':'1111111','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1359355490374','CHRCARNUMBER':'123123123','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1358074597852','CHRCARNUMBER':'323232','CNCNAME':'使馆汽车','BCRNAME':'核发检验合格标志'}]";
30. //context.Response.Write(json.Replace('\'','\"'));
31. }
32. public bool IsReusable
33. {
34. get
35. {
36. return false;
37. }
38. }
39. }

上面的服务器端程序中的注释很详细，有不懂的可以留言说明。类库的用的是Newtonsoft.Json.dll。大家点击即可从我的网盘里下载——不要任何费用哦~亲

下面是客户端代码：

1. <html xmlns="http://www.w3.org/1999/xhtml">
2. <head runat="server">
3. <title>测试</title>
4. <script src="jquery-1.7.1.js" type="text/javascript"></script>
5. </head>
6. <body>
7. <form id="form1" runat="server">
8. <table id="data">
9. <tr id="tem">
10. <td id="ID">
11. 流水号
12. </td>
13. <td id="CarNumber">
14. 车牌号
15. </td>
16. <td id="BusinessName">
17. 业务类型
18. </td>
19. <td id="btn">
20. <input id="Button2" type="button" value="button" />
21. </td>
22. </tr>
23. </table>
24. <div id="loading">
25. 正在加载数据...
26. </div>
27. <script type="text/jscript">
28. //模拟一个数据正在加载的样子
29. setTimeout(function () { $("#loading").hide(); }, 1000);
30. //设置定时器定时调用方法，单位是毫秒
31. setInterval(SetData(), 1000);
32. //从服务器端获取数据，并显示到界面上,用getJSON方法实现
33. function SetData() {
34. $.getJSON("getData.ashx", null, function (obj) {
35. $("tr").eq(0).nextAll().remove();   //将除模板行的tr删除
36. //将获取到的数据动态的加载到table中
37. for (var i = 0; i < obj.length; i++) {
38. //将第四条的ID设置为红色（此处可以用来根据内容修改样式
39. if (i == 3) {
40. row.find("#ID").css("color", "red");
41. }
42. //获取模板行，复制一行
43. var row = $("#tem").clone();
44. //将新一行的按钮添加click事件
45. row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
46. //注意：在jquery1.4.2中，上面的方法会出错，具体原因我也不知道，反正1.7.1这样写是没有问题的
47. //如果上面代码不行，你可以试一下
48. //row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
49. //亲测上面的代码在1.4.2.min...中可以运行，这个问题的解决浪费了很长事件，都怪用了比较老的框架
50. row.find("#ID").text(obj[i].CKRID); //流水号
51. row.find("#CarNumber").text(obj[i].CHRCARNUMBER);   //汽车车牌号
52. row.find("#BusinessName").text(obj[i].BCRNAME);     //所办理的业务名称
53. //将新行添加到表格中
54. row.appendTo("#data");
55. }
56. });
57. }
58. //获取传过来的参数并显示
59. function operation(event) {
60. alert(event.data.name);
61. alert(event.data.back);
62. }
63. //从服务器端获取数据，并显示到界面上,用ajax方法实现
64. function SetDataByAjax() {
65. $.ajax({
66. type: "get",    //设置调用类型
67. dataType: "json",   //设置数据类型
68. url: "getData.ashx",    //url
69. complete: function () { $("#loading").hide() },
70. success: function (obj) {
71. $("tr").eq(0).nextAll().remove();   //将除模板行的tr删除
72. //将获取到的数据动态的加载到table中
73. for (var i = 0; i < obj.length; i++) {
74. //将第四条的ID设置为红色（此处可以用来根据内容修改样式
75. if (i == 3) {
76. row.find("#ID").css("color", "red");
77. }
78. //获取模板行，复制一行
79. var row = $("#tem").clone();
80. //将新一行的按钮添加click事件
81. row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
82. //注意：在jquery1.4.2中，上面的方法会出错，具体原因我也不知道，反正1.7.1这样写是没有问题的
83. //如果上面代码不行，你可以试一下
84. //row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
85. //亲测上面的代码在1.4.2中可以运行，这个问题的解决浪费了很长事件，都怪用了比较老的框架
86. row.find("#ID").text(obj[i].CKRID); //流水号
87. row.find("#CarNumber").text(obj[i].CHRCARNUMBER);   //汽车车牌号
88. row.find("#BusinessName").text(obj[i].BCRNAME);     //所办理的业务名称
89. //将新行添加到表格中
90. row.appendTo("#data");
91. }
92. }
93. });
94. }
95. </script>
96. </form>
97. </body>
98. </html>

上面的就是自己动手写了一个自动刷新页面的例子，上面例子中，除了用了JQuery这个里面的东西你不能控制，如果足够牛，你都不想用他这个框架，想自己写一个，那么也是可以的。只是对于我这个初学者来说，用这个还是能省好多事的。

一个getJson方法，只需要给3个参数，他就把创建对象、回调函数、设置参数等全部操作就都给你做了。这个还是值得学习的，在平时的学习中，对于常用到的东西，应该考虑将其提炼成一个方法，放到自己的小小代码库中。

虽然上面的代码不是很难，可是个人感觉这是我对于ajax理解的一个里程碑例子，一个例子，解开了我好多曾经的疑雾。