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 面向对象编程 万物皆对象
Sep 17 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
JS重载实现方法分析
Dec 16 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 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字符串分割函数用法实例
2015/03/17 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
python读取LMDB中图像的方法
2018/07/02 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
Django 路由系统URLconf的使用
2018/10/11 Python
django基于restframework的CBV封装详解
2019/08/08 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
给民警的表扬信
2014/01/08 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
市场营销工作计划书
2014/09/15 职场文书
表扬信格式模板
2015/05/05 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python