Json數據異步綁定到界面的Table并且自動刷新原理及代碼_AJAX教程
推薦：jQuery Ajax使用心得詳細整理及注意事項jQuery Ajax相關文章想必大家在網上面已經看到了很多，本文主要目的是整理jQuery Ajax相關內容，感興趣的朋友可以了解下，或許本文對你有所幫助
做Winform習慣了，大家都習慣設置datasource這樣的寫法。如果想實現頁面定時刷新的話，用.net給封裝好的updatepanel和timer兩個控件實現起來其實挺容易的。這樣做加入了很多你不能控制的元素，舉個例子說就是：用updatepanel后，你設置的樣式很有可能就變了，然后你還需要去調這些。所以還是用一些自己控制性高的代碼比較合適。
今天就先從這個updatepanel加timer實現頁面自動刷新這個例子來下手吧。
首先來看一下我的一般處理程序，在這個里面，我自己實現的是從數據庫中查出datatable，然后轉換成json傳輸給客戶端
復制代碼 代碼如下:m.ghpqjb.com
/// <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。大家點擊即可從我的網盤里下載——不要任何費用哦~親
下面是客戶端代碼：
復制代碼 代碼如下:m.ghpqjb.com
<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理解的一個里程碑例子，一個例子，解開了我好多曾經的疑霧。
分享：利用iframe實現ajax跨域通信的實現原理(圖解)一般情況下都是用在同一域下的ajax請求；但是如果請求是發生在不同的域下，請求就無法執行，并且會拋出異常提示不允許跨域請求,接下來介紹利用iframe實現ajax跨域通信感興趣的朋友可以了解下，或許對你學習ajax跨域有所幫助
相關AJAX教程：
- 相關鏈接：
- 教程說明：
AJAX教程-Json數據異步綁定到界面的Table并且自動刷新原理及代碼
。