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 相关文章推荐
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
了解重排与重绘
May 29 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
js实现幻灯片轮播图
Aug 14 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
Vue——前端生成二维码的示例
2020/12/19 Vue.js
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python学习思维导图(必看篇)
2017/06/26 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
python简单实现插入排序实例代码
2020/12/16 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
语文教研活动总结
2014/07/02 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
经理助理岗位职责
2015/02/02 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
2015初中团委工作总结
2015/07/28 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers