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 页面 Mask实现代码
Jan 09 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
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
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
PHP守护进程实例
2015/03/06 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
几种响应式文字详解
2017/05/19 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
Python字符串替换实例分析
2015/05/11 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
python学生管理系统开发
2019/01/30 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
Python如何生成xml文件
2020/06/04 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
采购求职信
2014/03/17 职场文书
委托公证书
2014/04/08 职场文书
教师求职自荐信范文
2015/03/04 职场文书
学习心得体会
2019/06/20 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python