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

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

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

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

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

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

 

[html] view plaincopy
 
  1. /// <summary>  
  2.     /// getData 的摘要说明  
  3.     /// </summary>  
  4.     public class getData : IHttpHandler  
  5.     {  
  6.   
  7.         public void ProcessRequest(HttpContext context)  
  8.         {  
  9.             context.Response.ContentType = "text/plain";  
  10.             //context.Response.Write("Hello World");  
  11.   
  12.             //设置查询字符串  
  13.             string strSql = "select ckrID,chrCarNumber,cncName,bcrName from T_CarNumberCategory,T_CheckResult,t_BusinessCategory where ckrcheckresult is null and cncID=ckrcarnumbercategoryid and ckrBusinessCategory=bcrID";  
  14.             //设置连接字符串  
  15.             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";  
  16.             //定义并打开数据库连接  
  17.             OracleConnection conn = new OracleConnection(strConn);  
  18.             conn.Open();  
  19.   
  20.             //定义命令行对象，  
  21.             OracleCommand cmd = new OracleCommand(strSql, conn);  
  22.             //定义一个适配器，用来填充Datatable            ;  
  23.             OracleDataAdapter adp = new OracleDataAdapter(cmd);  
  24.             //定义一个DataTable并用适配器对其进行填充  
  25.             DataTable dt = new DataTable();  
  26.             adp.Fill(dt);  
  27.             context.Response.Write(JsonConvert.SerializeObject(dt));  
  28.   
  29.             //上面的是我从数据库中查询到的datatable，然后用一个Json操作类库将其转换为Json  
  30.   
  31.             ////由于大家没有数据库环境，我把上面的字符串复制出来，供大家测试实验用  
  32.             ////由于复制出来是双引号，放这里会报个错误，所以我改成单引号了  
  33.             ////但是客户端在获取json的时候，是认双引号的，所以不得不再替换回来。。。心碎  
  34.             //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':'核发检验合格标志'}]";  
  35.             //context.Response.Write(json.Replace('\'','\"'));  
  36.         }  
  37.   
  38.         public bool IsReusable  
  39.         {  
  40.             get  
  41.             {  
  42.                 return false;  
  43.             }  
  44.         }  
  45.     }  


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

 

        下面是客户端代码：

 

[html] view plaincopy
 
  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.         //模拟一个数据正在加载的样子  
  30.         setTimeout(function () { $("#loading").hide(); }, 1000);  
  31.   
  32.         //设置定时器定时调用方法，单位是毫秒  
  33.         setInterval(SetData(), 1000);  
  34.   
  35.         //从服务器端获取数据，并显示到界面上,用getJSON方法实现  
  36.         function SetData() {  
  37.   
  38.             $.getJSON("getData.ashx", null, function (obj) {  
  39.   
  40.                 $("tr").eq(0).nextAll().remove();   //将除模板行的tr删除  
  41.   
  42.                 //将获取到的数据动态的加载到table中  
  43.                 for (var i = 0; i < obj.length; i++) {  
  44.   
  45.                     //将第四条的ID设置为红色（此处可以用来根据内容修改样式  
  46.                     if (i == 3) {  
  47.                         row.find("#ID").css("color", "red");  
  48.                     }  
  49.   
  50.                     //获取模板行，复制一行  
  51.                     var row = $("#tem").clone();  
  52.   
  53.                     //将新一行的按钮添加click事件  
  54.                     row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);  
  55.                     //注意：在jquery1.4.2中，上面的方法会出错，具体原因我也不知道，反正1.7.1这样写是没有问题的  
  56.                     //如果上面代码不行，你可以试一下  
  57.                     //row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);  
  58.                     //亲测上面的代码在1.4.2.min...中可以运行，这个问题的解决浪费了很长事件，都怪用了比较老的框架  
  59.   
  60.                     row.find("#ID").text(obj[i].CKRID); //流水号  
  61.                     row.find("#CarNumber").text(obj[i].CHRCARNUMBER);   //汽车车牌号  
  62.                     row.find("#BusinessName").text(obj[i].BCRNAME);     //所办理的业务名称  
  63.   
  64.                     //将新行添加到表格中  
  65.                     row.appendTo("#data");  
  66.                 }  
  67.             });  
  68.         }  
  69.   
  70.         //获取传过来的参数并显示  
  71.         function operation(event) {  
  72.             alert(event.data.name);  
  73.             alert(event.data.back);  
  74.         }  
  75.   
  76.         //从服务器端获取数据，并显示到界面上,用ajax方法实现  
  77.         function SetDataByAjax() {  
  78.             $.ajax({  
  79.                 type: "get",    //设置调用类型  
  80.                 dataType: "json",   //设置数据类型  
  81.                 url: "getData.ashx",    //url  
  82.                 complete: function () { $("#loading").hide() },  
  83.                 success: function (obj) {  
  84.                     $("tr").eq(0).nextAll().remove();   //将除模板行的tr删除  
  85.   
  86.                     //将获取到的数据动态的加载到table中  
  87.                     for (var i = 0; i < obj.length; i++) {  
  88.   
  89.                         //将第四条的ID设置为红色（此处可以用来根据内容修改样式  
  90.                         if (i == 3) {  
  91.                             row.find("#ID").css("color", "red");  
  92.                         }  
  93.   
  94.                         //获取模板行，复制一行  
  95.                         var row = $("#tem").clone();  
  96.   
  97.                         //将新一行的按钮添加click事件  
  98.                         row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);  
  99.                         //注意：在jquery1.4.2中，上面的方法会出错，具体原因我也不知道，反正1.7.1这样写是没有问题的  
  100.                         //如果上面代码不行，你可以试一下  
  101.                         //row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);  
  102.                         //亲测上面的代码在1.4.2中可以运行，这个问题的解决浪费了很长事件，都怪用了比较老的框架  
  103.   
  104.                         row.find("#ID").text(obj[i].CKRID); //流水号  
  105.                         row.find("#CarNumber").text(obj[i].CHRCARNUMBER);   //汽车车牌号  
  106.                         row.find("#BusinessName").text(obj[i].BCRNAME);     //所办理的业务名称  
  107.   
  108.                         //将新行添加到表格中  
  109.                         row.appendTo("#data");  
  110.                     }  
  111.                 }  
  112.             });  
  113.         }  
  114.     </script>  
  115.     </form>  
  116. </body>  
  117. </html>  


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

 

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

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

 

posted on 2014-03-09 20:14  打油小牧童  阅读(547)  评论(0)  编辑  收藏  举报

导航