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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
javascript getElementsByTagName
Jan 31 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
详解vuex的简单使用
Mar 12 Javascript
详解JS浏览器事件循环机制
Mar 27 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
FCKeditor的安装(PHP)
2007/01/13 PHP
PHPMyAdmin 快速配置方法
2009/05/11 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
一个实用的php验证码类
2017/07/06 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
python实现根据月份和日期得到星座的方法
2015/03/27 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
2014小学植树节活动总结
2014/03/10 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
公司人事任命通知
2015/04/20 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
新手初学Java网络编程
2021/07/07 Java/Android