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带搜索框的下拉菜单
May 06 Javascript
JS定时器实例详细分析
Oct 11 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
深入了解JavaScript 私有化
May 30 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 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中include()与require()的区别说明
2010/03/10 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
angular多语言配置详解
2019/05/16 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
python线程锁(thread)学习示例
2013/12/04 Python
python网络爬虫采集联想词示例
2014/02/11 Python
python复制与引用用法分析
2015/04/08 Python
python中的字典操作及字典函数
2018/01/03 Python
python字典一键多值实例代码分享
2019/06/14 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
最新远光软件笔试题面试题内容
2013/11/08 面试题
高中家长寄语
2014/04/02 职场文书
村长贪污检举信
2014/04/04 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
教师先进个人材料
2014/12/17 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
刘胡兰观后感
2015/06/16 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
详解SQL报错盲注
2022/07/23 SQL Server