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


Posted in Javascript onSeptember 12, 2010

服务器再把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
Javascript 相关文章推荐
JavaScript游戏之优化篇
Nov 08 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
利用python分析access日志的方法
Oct 26 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 #Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 #Javascript
jQuery UI 应用不同Theme的办法
Sep 12 #Javascript
基于jquery的表格排序
Sep 11 #Javascript
javascript多种数据类型表格排序代码分析
Sep 11 #Javascript
javascript 触发HTML元素绑定的函数
Sep 11 #Javascript
Js组件的一些写法
Sep 10 #Javascript
You might like
mysql总结之explain
2012/02/27 PHP
php session劫持和防范的方法
2013/11/12 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
解放web程序员的输入验证
2006/10/06 Javascript
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
常用javascript表单验证汇总
2020/07/20 Javascript
Express的路由详解
2015/12/10 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
js中Generator函数的深入讲解
2019/04/07 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
使用tensorflow实现线性svm
2018/09/07 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
会计自我鉴定范文
2013/10/06 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
呐喊读书笔记
2015/06/30 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书