Json数据异步绑定到界面的Table并且自动刷新
转自:http://blog.csdn.net/jianxin1009/article/details/8565828‘
做Winform习惯了,大家都习惯设置datasource这样的写法。
如果想实现页面定时刷新的话,用.net给封装好的updatepanel和timer两个控件实现起来其实挺容易的。这样做加入了很多你不能控制的元素,举个例子说就是:用updatepanel后,你设置的样式很有可能就变了,然后你还需要去调这些。所以还是用一些自己控制性高的代码比较合适。
今天就先从这个updatepanel加timer实现页面自动刷新这个例子来下手吧。
首先来看一下我的一般处理程序,在这个里面,我自己实现的是从数据库中查出datatable,然后转换成json传输给客户端
- /// <summary>
- /// getData 的摘要说明
- /// </summary>
- public class getData : IHttpHandler
- {
- public void ProcessRequest(HttpContext context)
- {
- context.Response.ContentType = "text/plain";
- //context.Response.Write("Hello World");
- //设置查询字符串
- string strSql = "select ckrID,chrCarNumber,cncName,bcrName from T_CarNumberCategory,T_CheckResult,t_BusinessCategory where ckrcheckresult is null and cncID=ckrcarnumbercategoryid and ckrBusinessCategory=bcrID";
- //设置连接字符串
- 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";
- //定义并打开数据库连接
- OracleConnection conn = new OracleConnection(strConn);
- conn.Open();
- //定义命令行对象,
- OracleCommand cmd = new OracleCommand(strSql, conn);
- //定义一个适配器,用来填充Datatable ;
- OracleDataAdapter adp = new OracleDataAdapter(cmd);
- //定义一个DataTable并用适配器对其进行填充
- DataTable dt = new DataTable();
- adp.Fill(dt);
- context.Response.Write(JsonConvert.SerializeObject(dt));
- //上面的是我从数据库中查询到的datatable,然后用一个Json操作类库将其转换为Json
- ////由于大家没有数据库环境,我把上面的字符串复制出来,供大家测试实验用
- ////由于复制出来是双引号,放这里会报个错误,所以我改成单引号了
- ////但是客户端在获取json的时候,是认双引号的,所以不得不再替换回来。。。心碎
- //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‘:‘核发检验合格标志‘}]";
- //context.Response.Write(json.Replace(‘\‘‘,‘\"‘));
- }
- public bool IsReusable
- {
- get
- {
- return false;
- }
- }
- }
上面的服务器端程序中的注释很详细,有不懂的可以留言说明。类库的用的是Newtonsoft.Json.dll。大家点击即可从我的网盘里下载——不要任何费用哦~亲
下面是客户端代码:
- <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>
上面的就是自己动手写了一个自动刷新页面的例子,上面例子中,除了用了JQuery这个里面的东西你不能控制,如果足够牛,你都不想用他这个框架,想自己写一个,那么也是可以的。只是对于我这个初学者来说,用这个还是能省好多事的。
一个getJson方法,只需要给3个参数,他就把创建对象、回调函数、设置参数等全部操作就都给你做了。这个还是值得学习的,在平时的学习中,对于常用到的东西,应该考虑将其提炼成一个方法,放到自己的小小代码库中。
虽然上面的代码不是很难,可是个人感觉这是我对于ajax理解的一个里程碑例子,一个例子,解开了我好多曾经的疑雾。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。