Asp.net下使用Jquery Ajax傳送和接收DataTable的代碼

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

伺服器再把GridView反構造成DataTable, 再給DataTable增加一行之後，綁定到GridView，然後發回用戶端...
能不能簡單一點呢？
在使用Ajax資料請求資料，通常都是簡單格式，比如String，資訊量較少。當然也可以請求回XML，但是XML資料冗餘多，取到用戶端處理比json麻煩的多。
能不能簡單一點呢？
上面這些問題，如果DataTable與JSON類型可以方便的相互轉換，都可以迎刃而解了。
優點：1）避免不必要的回傳；
2）精簡非同步請求資料的大小；
3）解決資料量較大時，資料發送與接收繁瑣的問題。
既然好處這麼多，我們上代碼吧。
前台代碼：複製代碼代碼如下:<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript">
//onload
$(function() {
//點擊botton1
$("#botton1").click(function() {
var url = "default.aspx?ajax=1";
var dtb = generateDtb();
//序列化對象
var postdata = JSON.stringify(dtb);
//非同步請求
$.post(url, { json: postdata }, function(json) {
createTable(json);
}, "json")
});
});
//產生DataTable對象
function generateDtb() {
var dtb = new Array();
for (var i = 0; i < 10; i++) {
var row = new Object();
row.col1 = i;
row.col2 = i % 2 == 0 ? true : false;
row.col3 = i + "he\nll\"ow";
dtb.push(row);
}
return dtb;
}
//顯示Json中的資料
function createTable(json) {
var table = $("<table border='1'></table>");
for (var i = 0; i < json.length; i++) {
o1 = json[i];
var row = $("<tr></tr>");
for (key in o1) {
var td = $("<td></td>");
td.text(o1[key].toString());
td.appendTo(row);
}
row.appendTo(table);
}
table.appendTo($("#back"));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="botton1" type="button" value="button" />
<div id="back">
</div>
</div>
</form>
</body>
</html>

後台代碼：
/// <summary> 複製代碼代碼如下:/// 頁面載入時
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
//判斷是否非同步請求
if (Request.QueryString["ajax"] == "1")
{
ProcessRequest();
}
}
/// <summary>
/// 處理非同步請求
/// </summary>
private void ProcessRequest()
{
Response.ContentType = "text/html";
string json = Request.Form["json"];
//還原序列化DataTable
DataTable newdtb = Json2Dtb(json);
//序列化DataTable為JSON
string back = Dtb2Json(newdtb);
Response.Write(back);
Response.End();
}
/// <summary>
/// DataTable轉Json
/// </summary>
/// <param name="dtb"></param>
/// <returns></returns>
private string Dtb2Json(DataTable dtb)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = new ArrayList();
foreach (DataRow row in dtb.Rows)
{
Dictionary<string, object> drow = new Dictionary<string, object>();
foreach (DataColumn col in dtb.Columns)
{
drow.Add(col.ColumnName, row[col.ColumnName]);
}
dic.Add(drow);
}
return jss.Serialize(dic);
}
/// <summary>
/// Json轉DataTable
/// </summary>
/// <param name="json"></param>
/// <returns></returns>
private DataTable Json2Dtb(string json)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = jss.Deserialize<ArrayList>(json);
DataTable dtb = new DataTable();
if (dic.Count > 0)
{
foreach (Dictionary<string, object> drow in dic)
{
if (dtb.Columns.Count == 0)
{
foreach (string key in drow.Keys)
{
dtb.Columns.Add(key, drow[key].GetType());
}
}
DataRow row = dtb.NewRow();
foreach (string key in drow.Keys)
{
row[key] = drow[key];
}
dtb.Rows.Add(row);
}
}
return dtb;
}

再附一個下載檔案，覺得有用的可以下載看看
json.zip

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More