如果想实现页面定时刷新的话,用.net给封装好的updatepanel和timer两个控件实现起来其实挺容易的。这样做加入了很多你不能控制的元素,举个例子说就是:用updatepanel后,你设置的样式很有可能就变了,然后你还需要去调这些。所以还是用一些自己控制性高的代码比较合适。
/// <summary>
/// getData 的摘要说明
/// </summary>
p
ublic class getData : IHttpHandler
{
public void
PRocessRequest(HttpContext context)
{
context.Response.ContentTy
PE = "text/pl
ain";
//context.Response.Wr
ITe("Hello World");
//设置查询字符串
string str
SQL = "select ckrID,c
hrCarNumber,cncN
ame,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':'as
DFsadf','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;
}
}
}
<ht
ML 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>
虽然上面的代码不是很难,可是个人感觉这是我对于ajax理解的一个里程碑例子,一个例子,解开了我好多曾经的疑雾。