Asp.net下使用Jquery Ajax传送和接收DataTable的代码

服务器再把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 + "henll"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

　　推荐阅读

　　jquery的Theme和Theme Switcher使用小结

首先上一幅截图，效果不错吧: 一、引入jquery主题theme 在head中引用jquery主题的CSS链接http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/base/jquery-ui.css还有许多其他不同的主题：base, black-tie>>>详细阅读

本文标题：Asp.net下使用Jquery Ajax传送和接收DataTable的代码

地址：http://www.17bianji.com/kaifa2/JS/25726.html

1/2 1