Asp.net下使用Jquery Ajax传送和接收DataTable的代码

服务器再把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

赞 (0)

相关推荐

  • 使用jquery的ajax需要注意的地方dataType的设置

    昨天在做ajax时遇到问题, 复制代码 代码如下: <SPAN style="WHITE-SPACE: pre"> </SPAN>$.ajax({ url:'<{$weburl}>/main.php?action=getDepart&cid='+cid, type:'post', dataType:'json', success:function(data){ //data=eval('('+data+')'); if(data.s==1)

  • jQuery ajax dataType值为text json探索分享

    复制代码 代码如下: <dt style="margin:15px 0px 3px; padding:0px; border:0px; font-weight:bold; color:rgb(4,121,167); font-family:Verdana,Arial,宋体; background-color:rgb(249,249,249)">dataType 类型:String 预期服务器返回的数据类型.如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来

  • JQuery.Ajax()的data参数类型实例详解

    假如现在有这样一个表单,是添加元素用的. <form id='addForm' action='UserAdd.action' type='post'> <label for='uname'>用户名</label>:<input type='text' name='uname' id='uname'><br> <label for='mobileIpt'>手机号:</label><input type='text'

  • JQuery中Ajax()的data参数类型实例分析

    本文实例分析了JQuery中Ajax()的data参数类型.分享给大家供大家参考,具体如下: 前面简单分析介绍了<ajax中data传参的两种方式>,对于ajax参数传递方式有了初步的了解,这里就来进一步分析一下ajax中data参数的类型. 假如现在有这样一个表单,是添加元素用的. <form id='addForm' action='UserAdd.action' type='post'> <label for='uname'>用户名</label>:&

  • Jquery+ajax请求data显示在GridView上(asp.net)

    AJAXLoadProgressForm.aspx: 复制代码 代码如下: <script src="JS/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> function ShowProgressDiv() { var ID = $("input#idtxt").val();

  • Jquery中ajax方法data参数的用法小结

    复制代码 代码如下: $.ajax({   type: "POST",   url: "some.php",   data: "name=John&location=Boston", //第一种方式传参  // data: {name:"John",location:"Boston"}  //第二种方式传参  // data: {foo:["bar1", "bar2&q

  • jQuery.Ajax()的data参数类型详解

    假如现在有这样一个表单,是添加元素用的. <form id='addForm' action='UserAdd.action' type='post'> <label for='uname'>用户名</label>:<input type='text' name='uname' id='uname'><br> <label for='mobileIpt'>手机号:</label><input type='text'

  • JQuery DataTable删除行后的页面更新利用Ajax解决

    使用Jquery的DataTable进行数据表处理非常方便,常遇到的一个问题就是删除一行后页面必须进行更新,需要注意的方法如下:前台页面中初始化table时注意: 复制代码 代码如下: var table = $('#sorting-advanced'); table.dataTable({ 'bServerSide': true, 'sAjaxSource': 'servlet/UserList<%=queryString%>', 'bProcessing': true, 'bStateSa

  • Asp.net下使用Jquery Ajax传送和接收DataTable的代码

    服务器再把GridView反构造成DataTable, 再给DataTable增加一行之后,绑定到GridView,然后发回客户端... 能不能简单一点呢? 在使用Ajax数据请求数据,通常都是简单格式,比如String,信息量较少.当然也可以请求回XML,但是XML数据冗余多,取到客户端处理比json麻烦的多. 能不能简单一点呢? 上面这些问题,如果DataTable与JSON类型可以方便的相互转换,都可以迎刃而解了. 优点:1)避免不必要的回传: 2)精简异步请求数据的大小 : 3)解决数据

  • Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）

    Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）

    其中用到了jquery插件来验证用户名哦,这里是利用jquery ajax来验证用户名是否存在哦.大家看看效果图,后面将附上源码下载. jquery框架实现的ajax 验证用户名是否存在的部分JS 复制代码 代码如下: $("#accounts").formValidator({onshow:"请输入用户名",onfocus:"用户名至少4个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputVal

  • jQuery+Ajax+PHP“喜欢”评级功能实现代码

    本文章来给大家介绍一个jQuery+Ajax+PHP实现"喜欢"评级功能代码,用户点击页面中自己喜欢的图片上的红心按钮时,前端页面向后台发送一个ajax请求,后台PHP程序接收请求后,查询IP库中是否已经有该用户的点击记录,如果没有,则将对应的数值+1,同时将该用户IP信息写入IP库,反之则告诉用户已经"喜欢过了". 数据库设计 先准备两张表,pic表保存的是图片信息,包括图片对应的名称.路径以及图片"喜欢"总数,pic_ip则记录用户点击喜欢后

  • asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

  • JQuery+Ajax无刷新分页的实例代码

    JQuery+Ajax无刷新分页的实例代码

    先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单  就四个字段 分别是News_id  News_title  News_time  News_readtimes 二.前台页面代码: 复制代码 代码如下: <head runat="server">    <title>JQuery无刷新分页</title>    <link hre

  • jQuery Ajax 实现分页 kkpager插件实例代码

    jQuery Ajax 实现分页 kkpager插件实例代码

    代码片段一: <!--分页组件 JS CSS 开始--> <!--分页组件 CSS--> <link type="text/css" href="/resource/css/kkpager_blue.css" rel="external nofollow" rel="stylesheet" /> <!--分页组件 JS--> <script type="text/

  • jquery ajax jsonp跨域调用实例代码

    客户端代码 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.WebForm1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

  • 基于asp.net下使用jquery实现ajax的解决方法

    基于asp.net下使用jquery实现ajax的解决方法

    无论是jquery还是ajax在今天来讨论已经很落后了,网上也有非常多的这方面的资料,但是依然有不少新手对此很茫然.本文以最简单的方法为新手示范如何使用jquery实现ajax技术(所以本文是专为新手所写,老鸟勿喷,大神此处省略一万字).至于什么是jquery什么是ajax,自己谷歌去. 首先新建一个名闻Ajax的asp.net web空应用程序,项目目录如下图所示. 其中.ashx文件是一般处理程序,暂时不用知道它是干嘛用的,后面你就知道了.jquery-1.7.1.js可以在这里下载. 我们

  • asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码

    首先贴上Jquery的ajax: 复制代码 代码如下: $.ajax({ url: 'ws_Ajax.asmx/BindDictByUpper', type: 'POST', contentType: 'application/json;charset=utf-8', dataType: 'json', data: '{ PpareId:"' + varlue + '"}', success: function (data) { var dataObj = eval("(&q

  • asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)

    asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)

    首先来看一些效果图: 这个是淘宝首页的搜索效果 京东首页的搜索效果 我修改的jQuery.AutoComplete实现的效果 一.实现效果分析 我要实现的效果就是和GOOGLE类似,需要满足一下3个要求(因为这样我认为是最好的用户体验,毕竟GOOGLE做了那么久了): .首先根据关键字列出关键字相关的信息(包含统计信息) .可以使用键盘上下键选择(默认不选中第一条),文本框内容根据选择信息变换 .当选择第一或者最后一条时再向上或向下则取消选中,文本框中内容还原回原先输入的内容(这点比较重要,京东

随机推荐