Json數據異步綁定到界面的Table并且自動刷新原理及代碼

來源：懂視網責編：小采時間：2020-11-27 22:52:24

Json數據異步綁定到界面的Table并且自動刷新原理及代碼

Json數據異步綁定到界面的Table并且自動刷新原理及代碼:做Winform習慣了，大家都習慣設置datasource這樣的寫法。如果想實現頁面定時刷新的話，用.net給封裝好的updatepanel和timer兩個控件實現起來其實挺容易的。這樣做加入了很多你不能控制的元素，舉個例子說就是：用updatepanel后，你設置的樣式很有可

推薦度：

點擊下載本文 文檔為doc格式

導讀Json數據異步綁定到界面的Table并且自動刷新原理及代碼:做Winform習慣了，大家都習慣設置datasource這樣的寫法。如果想實現頁面定時刷新的話，用.net給封裝好的updatepanel和timer兩個控件實現起來其實挺容易的。這樣做加入了很多你不能控制的元素，舉個例子說就是：用updatepanel后，你設置的樣式很有可

做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理解的一個里程碑例子，一個例子，解開了我好多曾經的疑霧。
 
 




聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Json數據異步綁定到界面的Table并且自動刷新原理及代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽： table 頁面自動刷新 json數據異步綁定到界面的table并且自動刷新

熱門焦點

Json數據異步綁定到界面的Table并且自動刷新原理及代碼

Json數據異步綁定到界面的Table并且自動刷新原理及代碼

Json數據異步綁定到界面的Table并且自動刷新原理及代碼

最新推薦

猜你喜歡

熱門推薦