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 相关文章推荐
js AspxButton的客户端操作
Jun 26 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
我的群发邮件程序
2006/10/09 PHP
关于php fread()使用技巧
2010/01/22 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
Python做简单的字符串匹配详解
2017/03/21 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
师范院校学生自荐信范文
2013/12/27 职场文书
高二化学教学反思
2014/01/30 职场文书
军训自我鉴定范文
2014/02/13 职场文书
秘书英文求职信
2014/04/16 职场文书
见习报告格式范文
2014/11/08 职场文书