Json数据异步绑定到界面的Table并且自动刷新原理及代码

做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.51sjk.com/Upload/Articles/1/0/267/267656_20210708021752158.jpg"> 
<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理解的一个里程碑例子，一个例子，解开了我好多曾经的疑雾。