Json數(shù)據(jù)異步綁定到界面的Table并且自動(dòng)刷新原理及代碼
更新時(shí)間：2013年02月04日 14:34:15 作者：
做Winform習(xí)慣了，大家都習(xí)慣設(shè)置datasource這樣的寫法,今天就先從這個(gè)updatepanel加timer實(shí)現(xiàn)頁面自動(dòng)刷新這個(gè)例子來下手吧,感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)ajax有所幫助
做Winform習(xí)慣了，大家都習(xí)慣設(shè)置datasource這樣的寫法。
如果想實(shí)現(xiàn)頁面定時(shí)刷新的話，用.net給封裝好的updatepanel和timer兩個(gè)控件實(shí)現(xiàn)起來其實(shí)挺容易的。這樣做加入了很多你不能控制的元素，舉個(gè)例子說就是：用updatepanel后，你設(shè)置的樣式很有可能就變了，然后你還需要去調(diào)這些。所以還是用一些自己控制性高的代碼比較合適。
今天就先從這個(gè)updatepanel加timer實(shí)現(xiàn)頁面自動(dòng)刷新這個(gè)例子來下手吧。
首先來看一下我的一般處理程序，在這個(gè)里面，我自己實(shí)現(xiàn)的是從數(shù)據(jù)庫中查出datatable，然后轉(zhuǎn)換成json傳輸給客戶端
/// <summary>
/// getData 的摘要說明
/// </summary>
public class getData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
//設(shè)置查詢字符串
string strSql = "select ckrID,chrCarNumber,cncName,bcrName from T_CarNumberCategory,T_CheckResult,t_BusinessCategory where ckrcheckresult is null and cncID=ckrcarnumbercategoryid and ckrBusinessCategory=bcrID";
//設(shè)置連接字符串
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";
//定義并打開數(shù)據(jù)庫連接
OracleConnection conn = new OracleConnection(strConn);
conn.Open();
//定義命令行對(duì)象，
OracleCommand cmd = new OracleCommand(strSql, conn);
//定義一個(gè)適配器，用來填充Datatable ;
OracleDataAdapter adp = new OracleDataAdapter(cmd);
//定義一個(gè)DataTable并用適配器對(duì)其進(jìn)行填充
DataTable dt = new DataTable();
adp.Fill(dt);
context.Response.Write(JsonConvert.SerializeObject(dt));
//上面的是我從數(shù)據(jù)庫中查詢到的datatable，然后用一個(gè)Json操作類庫將其轉(zhuǎn)換為Json
////由于大家沒有數(shù)據(jù)庫環(huán)境，我把上面的字符串復(fù)制出來，供大家測試實(shí)驗(yàn)用
////由于復(fù)制出來是雙引號(hào)，放這里會(huì)報(bào)個(gè)錯(cuò)誤，所以我改成單引號(hào)了
////但是客戶端在獲取json的時(shí)候，是認(rèn)雙引號(hào)的，所以不得不再替換回來。。。心碎
//var json = "[{'CKRID':'1359374764563','CHRCARNUMBER':'123123','CNCNAME':'大型汽車','BCRNAME':'核發(fā)檢驗(yàn)合格標(biāo)志'},{'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':'核發(fā)檢驗(yàn)合格標(biāo)志'}]";
//context.Response.Write(json.Replace('\'','\"'));
}
public bool IsReusable
{
get
{
return false;
}
}
}
上面的服務(wù)器端程序中的注釋很詳細(xì)，有不懂的可以留言說明。類庫的用的是Newtonsoft.Json.dll。大家點(diǎn)擊即可從我的網(wǎng)盤里下載——不要任何費(fèi)用哦~親
下面是客戶端代碼：
<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">
流水號(hào)
</td>
<td id="CarNumber">
車牌號(hào)
</td>
<td id="BusinessName">
業(yè)務(wù)類型
</td>
<td id="btn">
<input id="Button2" type="button" value="button" />
</td>
</tr>
</table>
<div id="loading">
正在加載數(shù)據(jù)...
</div>
<script type="text/jscript">
//模擬一個(gè)數(shù)據(jù)正在加載的樣子
setTimeout(function () { $("#loading").hide(); }, 1000);
//設(shè)置定時(shí)器定時(shí)調(diào)用方法，單位是毫秒
setInterval(SetData(), 1000);
//從服務(wù)器端獲取數(shù)據(jù)，并顯示到界面上,用getJSON方法實(shí)現(xiàn)
function SetData() {
$.getJSON("getData.ashx", null, function (obj) {
$("tr").eq(0).nextAll().remove(); //將除模板行的tr刪除
//將獲取到的數(shù)據(jù)動(dòng)態(tài)的加載到table中
for (var i = 0; i < obj.length; i++) {
//將第四條的ID設(shè)置為紅色（此處可以用來根據(jù)內(nèi)容修改樣式
if (i == 3) {
row.find("#ID").css("color", "red");
}
//獲取模板行，復(fù)制一行
var row = $("#tem").clone();
//將新一行的按鈕添加click事件
row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
//注意：在jquery1.4.2中，上面的方法會(huì)出錯(cuò)，具體原因我也不知道，反正1.7.1這樣寫是沒有問題的
//如果上面代碼不行，你可以試一下
//row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
//親測上面的代碼在1.4.2.min...中可以運(yùn)行，這個(gè)問題的解決浪費(fèi)了很長事件，都怪用了比較老的框架
row.find("#ID").text(obj[i].CKRID); //流水號(hào)
row.find("#CarNumber").text(obj[i].CHRCARNUMBER); //汽車車牌號(hào)
row.find("#BusinessName").text(obj[i].BCRNAME); //所辦理的業(yè)務(wù)名稱
//將新行添加到表格中
row.appendTo("#data");
}
});
}
//獲取傳過來的參數(shù)并顯示
function operation(event) {
alert(event.data.name);
alert(event.data.back);
}
//從服務(wù)器端獲取數(shù)據(jù)，并顯示到界面上,用ajax方法實(shí)現(xiàn)
function SetDataByAjax() {
$.ajax({
type: "get", //設(shè)置調(diào)用類型
dataType: "json", //設(shè)置數(shù)據(jù)類型
url: "getData.ashx", //url
complete: function () { $("#loading").hide() },
success: function (obj) {
$("tr").eq(0).nextAll().remove(); //將除模板行的tr刪除
//將獲取到的數(shù)據(jù)動(dòng)態(tài)的加載到table中
for (var i = 0; i < obj.length; i++) {
//將第四條的ID設(shè)置為紅色（此處可以用來根據(jù)內(nèi)容修改樣式
if (i == 3) {
row.find("#ID").css("color", "red");
}
//獲取模板行，復(fù)制一行
var row = $("#tem").clone();
//將新一行的按鈕添加click事件
row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
//注意：在jquery1.4.2中，上面的方法會(huì)出錯(cuò)，具體原因我也不知道，反正1.7.1這樣寫是沒有問題的
//如果上面代碼不行，你可以試一下
//row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
//親測上面的代碼在1.4.2中可以運(yùn)行，這個(gè)問題的解決浪費(fèi)了很長事件，都怪用了比較老的框架
row.find("#ID").text(obj[i].CKRID); //流水號(hào)
row.find("#CarNumber").text(obj[i].CHRCARNUMBER); //汽車車牌號(hào)
row.find("#BusinessName").text(obj[i].BCRNAME); //所辦理的業(yè)務(wù)名稱
//將新行添加到表格中
row.appendTo("#data");
}
}
});
}
</script>
</form>
</body>
</html>
上面的就是自己動(dòng)手寫了一個(gè)自動(dòng)刷新頁面的例子，上面例子中，除了用了JQuery這個(gè)里面的東西你不能控制，如果足夠牛，你都不想用他這個(gè)框架，想自己寫一個(gè)，那么也是可以的。只是對(duì)于我這個(gè)初學(xué)者來說，用這個(gè)還是能省好多事的。
一個(gè)getJson方法，只需要給3個(gè)參數(shù)，他就把創(chuàng)建對(duì)象、回調(diào)函數(shù)、設(shè)置參數(shù)等全部操作就都給你做了。這個(gè)還是值得學(xué)習(xí)的，在平時(shí)的學(xué)習(xí)中，對(duì)于常用到的東西，應(yīng)該考慮將其提煉成一個(gè)方法，放到自己的小小代碼庫中。
雖然上面的代碼不是很難，可是個(gè)人感覺這是我對(duì)于ajax理解的一個(gè)里程碑例子，一個(gè)例子，解開了我好多曾經(jīng)的疑霧。
如果想實(shí)現(xiàn)頁面定時(shí)刷新的話，用.net給封裝好的updatepanel和timer兩個(gè)控件實(shí)現(xiàn)起來其實(shí)挺容易的。這樣做加入了很多你不能控制的元素，舉個(gè)例子說就是：用updatepanel后，你設(shè)置的樣式很有可能就變了，然后你還需要去調(diào)這些。所以還是用一些自己控制性高的代碼比較合適。
今天就先從這個(gè)updatepanel加timer實(shí)現(xiàn)頁面自動(dòng)刷新這個(gè)例子來下手吧。
首先來看一下我的一般處理程序，在這個(gè)里面，我自己實(shí)現(xiàn)的是從數(shù)據(jù)庫中查出datatable，然后轉(zhuǎn)換成json傳輸給客戶端
復(fù)制代碼 代碼如下:
/// <summary>
/// getData 的摘要說明
/// </summary>
public class getData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
//設(shè)置查詢字符串
string strSql = "select ckrID,chrCarNumber,cncName,bcrName from T_CarNumberCategory,T_CheckResult,t_BusinessCategory where ckrcheckresult is null and cncID=ckrcarnumbercategoryid and ckrBusinessCategory=bcrID";
//設(shè)置連接字符串
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";
//定義并打開數(shù)據(jù)庫連接
OracleConnection conn = new OracleConnection(strConn);
conn.Open();
//定義命令行對(duì)象，
OracleCommand cmd = new OracleCommand(strSql, conn);
//定義一個(gè)適配器，用來填充Datatable ;
OracleDataAdapter adp = new OracleDataAdapter(cmd);
//定義一個(gè)DataTable并用適配器對(duì)其進(jìn)行填充
DataTable dt = new DataTable();
adp.Fill(dt);
context.Response.Write(JsonConvert.SerializeObject(dt));
//上面的是我從數(shù)據(jù)庫中查詢到的datatable，然后用一個(gè)Json操作類庫將其轉(zhuǎn)換為Json
////由于大家沒有數(shù)據(jù)庫環(huán)境，我把上面的字符串復(fù)制出來，供大家測試實(shí)驗(yàn)用
////由于復(fù)制出來是雙引號(hào)，放這里會(huì)報(bào)個(gè)錯(cuò)誤，所以我改成單引號(hào)了
////但是客戶端在獲取json的時(shí)候，是認(rèn)雙引號(hào)的，所以不得不再替換回來。。。心碎
//var json = "[{'CKRID':'1359374764563','CHRCARNUMBER':'123123','CNCNAME':'大型汽車','BCRNAME':'核發(fā)檢驗(yàn)合格標(biāo)志'},{'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':'核發(fā)檢驗(yàn)合格標(biāo)志'}]";
//context.Response.Write(json.Replace('\'','\"'));
}
public bool IsReusable
{
get
{
return false;
}
}
}
上面的服務(wù)器端程序中的注釋很詳細(xì)，有不懂的可以留言說明。類庫的用的是Newtonsoft.Json.dll。大家點(diǎn)擊即可從我的網(wǎng)盤里下載——不要任何費(fèi)用哦~親
下面是客戶端代碼：
復(fù)制代碼 代碼如下:
<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">
流水號(hào)
</td>
<td id="CarNumber">
車牌號(hào)
</td>
<td id="BusinessName">
業(yè)務(wù)類型
</td>
<td id="btn">
<input id="Button2" type="button" value="button" />
</td>
</tr>
</table>
<div id="loading">
正在加載數(shù)據(jù)...
</div>
<script type="text/jscript">
//模擬一個(gè)數(shù)據(jù)正在加載的樣子
setTimeout(function () { $("#loading").hide(); }, 1000);
//設(shè)置定時(shí)器定時(shí)調(diào)用方法，單位是毫秒
setInterval(SetData(), 1000);
//從服務(wù)器端獲取數(shù)據(jù)，并顯示到界面上,用getJSON方法實(shí)現(xiàn)
function SetData() {
$.getJSON("getData.ashx", null, function (obj) {
$("tr").eq(0).nextAll().remove(); //將除模板行的tr刪除
//將獲取到的數(shù)據(jù)動(dòng)態(tài)的加載到table中
for (var i = 0; i < obj.length; i++) {
//將第四條的ID設(shè)置為紅色（此處可以用來根據(jù)內(nèi)容修改樣式
if (i == 3) {
row.find("#ID").css("color", "red");
}
//獲取模板行，復(fù)制一行
var row = $("#tem").clone();
//將新一行的按鈕添加click事件
row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
//注意：在jquery1.4.2中，上面的方法會(huì)出錯(cuò)，具體原因我也不知道，反正1.7.1這樣寫是沒有問題的
//如果上面代碼不行，你可以試一下
//row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
//親測上面的代碼在1.4.2.min...中可以運(yùn)行，這個(gè)問題的解決浪費(fèi)了很長事件，都怪用了比較老的框架
row.find("#ID").text(obj[i].CKRID); //流水號(hào)
row.find("#CarNumber").text(obj[i].CHRCARNUMBER); //汽車車牌號(hào)
row.find("#BusinessName").text(obj[i].BCRNAME); //所辦理的業(yè)務(wù)名稱
//將新行添加到表格中
row.appendTo("#data");
}
});
}
//獲取傳過來的參數(shù)并顯示
function operation(event) {
alert(event.data.name);
alert(event.data.back);
}
//從服務(wù)器端獲取數(shù)據(jù)，并顯示到界面上,用ajax方法實(shí)現(xiàn)
function SetDataByAjax() {
$.ajax({
type: "get", //設(shè)置調(diào)用類型
dataType: "json", //設(shè)置數(shù)據(jù)類型
url: "getData.ashx", //url
complete: function () { $("#loading").hide() },
success: function (obj) {
$("tr").eq(0).nextAll().remove(); //將除模板行的tr刪除
//將獲取到的數(shù)據(jù)動(dòng)態(tài)的加載到table中
for (var i = 0; i < obj.length; i++) {
//將第四條的ID設(shè)置為紅色（此處可以用來根據(jù)內(nèi)容修改樣式
if (i == 3) {
row.find("#ID").css("color", "red");
}
//獲取模板行，復(fù)制一行
var row = $("#tem").clone();
//將新一行的按鈕添加click事件
row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
//注意：在jquery1.4.2中，上面的方法會(huì)出錯(cuò)，具體原因我也不知道，反正1.7.1這樣寫是沒有問題的
//如果上面代碼不行，你可以試一下
//row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
//親測上面的代碼在1.4.2中可以運(yùn)行，這個(gè)問題的解決浪費(fèi)了很長事件，都怪用了比較老的框架
row.find("#ID").text(obj[i].CKRID); //流水號(hào)
row.find("#CarNumber").text(obj[i].CHRCARNUMBER); //汽車車牌號(hào)
row.find("#BusinessName").text(obj[i].BCRNAME); //所辦理的業(yè)務(wù)名稱
//將新行添加到表格中
row.appendTo("#data");
}
}
});
}
</script>
</form>
</body>
</html>
上面的就是自己動(dòng)手寫了一個(gè)自動(dòng)刷新頁面的例子，上面例子中，除了用了JQuery這個(gè)里面的東西你不能控制，如果足夠牛，你都不想用他這個(gè)框架，想自己寫一個(gè)，那么也是可以的。只是對(duì)于我這個(gè)初學(xué)者來說，用這個(gè)還是能省好多事的。
一個(gè)getJson方法，只需要給3個(gè)參數(shù)，他就把創(chuàng)建對(duì)象、回調(diào)函數(shù)、設(shè)置參數(shù)等全部操作就都給你做了。這個(gè)還是值得學(xué)習(xí)的，在平時(shí)的學(xué)習(xí)中，對(duì)于常用到的東西，應(yīng)該考慮將其提煉成一個(gè)方法，放到自己的小小代碼庫中。
雖然上面的代碼不是很難，可是個(gè)人感覺這是我對(duì)于ajax理解的一個(gè)里程碑例子，一個(gè)例子，解開了我好多曾經(jīng)的疑霧。
您可能感興趣的文章:
- js實(shí)現(xiàn)網(wǎng)頁自動(dòng)刷新可制作節(jié)日倒計(jì)時(shí)效果
- 返回上一頁并自動(dòng)刷新的JavaScript代碼
- 框架頁面高度自動(dòng)刷新的Javascript腳本
- 自動(dòng)刷新網(wǎng)頁,自動(dòng)刷新當(dāng)前頁面,JS調(diào)用
- javascript時(shí)間自動(dòng)刷新實(shí)現(xiàn)原理與步驟
- javascript 頁面只自動(dòng)刷新一次
- JS擴(kuò)展Z-Blog圖片驗(yàn)證碼的單擊自動(dòng)刷新與評(píng)論內(nèi)容自動(dòng)保存
- javascript觀察者模式實(shí)現(xiàn)自動(dòng)刷新效果
相關(guān)文章
javascript Ajax獲取遠(yuǎn)程url的返回判斷
將以下文本放入一個(gè)HTML頁面即可看到效果,將會(huì)有兩次彈出提示,最后在頁面上顯示YES,表示完成2012-01-01
Ajax異步提交數(shù)據(jù)返回值的換行問題實(shí)例分析
這篇文章主要介紹了Ajax異步提交數(shù)據(jù)返回值的換行問題,結(jié)合實(shí)例形式較為詳細(xì)的分析了ajax異步提交過程中返回值帶有換行的處理技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
Ajax實(shí)現(xiàn)模擬關(guān)鍵字智能匹配搜索效果
這篇文章主要介紹了Ajax實(shí)現(xiàn)模擬關(guān)鍵字智能匹配搜索效果,當(dāng)在搜索框輸入內(nèi)容時(shí)，根據(jù)關(guān)鍵字匹配，顯示彈出層，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了AJAX分頁效果的簡單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Ajax 上傳圖片并預(yù)覽的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狝jax 上傳圖片并預(yù)覽的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
這篇文章給大家介紹ajax基礎(chǔ)教程之封裝的知識(shí)，本文通過實(shí)例給大家詳細(xì)介紹，非常不錯(cuò)，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
js結(jié)合json實(shí)現(xiàn)ajax簡單實(shí)例
這篇文章主要為大家詳細(xì)介紹了js結(jié)合json實(shí)現(xiàn)ajax簡單實(shí)例的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
通過Ajax進(jìn)行Post提交Json數(shù)據(jù)的方法
下面小編就為大家分享一篇通過Ajax進(jìn)行Post提交Json數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
用Promise解決多個(gè)異步Ajax請求導(dǎo)致的代碼嵌套問題(完美解決方案)
這篇文章主要介紹了用Promise解決多個(gè)異步Ajax請求導(dǎo)致的代碼嵌套問題(完美解決方案),需要的朋友可以參考下2017-02-02
jQuery中ajax - post() 方法實(shí)例詳解
在jquery中的ajax有二個(gè)數(shù)據(jù)發(fā)送模式，一種是get，另一種是post()，下面我來給大家介紹介紹，有需要了解的朋友可參考2015-09-09