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显示和隐藏div特效实例
Feb 27 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 Javascript
四十九个javascript小知识实用技巧
Nov 20 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
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
PHP5函数小全(分享)
2013/06/06 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
jQuery事件用法实例汇总
2014/08/29 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
js性能优化技巧
2015/11/29 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
校园活动策划书范文
2014/01/10 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
廉洁自律承诺书
2014/03/27 职场文书
学生安全责任书
2014/04/15 职场文书
党支部特色活动方案
2014/08/20 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python