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 DOM 学习第五章 表单简介
Feb 19 Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
JavaScript 原型与原型链详情
Nov 02 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开发框架myqee新手快速入门教程
2014/07/14 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
vue接口请求加密实例
2020/08/11 Javascript
Python素数检测实例分析
2015/06/15 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
英语翻译系毕业生求职信
2013/09/29 职场文书
财务会计专业应届毕业生求职信
2013/10/18 职场文书
新春联欢会主持词
2014/03/24 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
十八大标语口号
2014/10/09 职场文书