详谈 Jquery Ajax异步处理Json数据.


Posted in Javascript onSeptember 09, 2011

所谓的Ajax.这里我们讲二种方法
方法一:(微软有自带Ajax框架)
在Asp.net里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间 然后定义静态方法(方法前加上 [WebMethod])
[WebMethod]
public static string ABC(string ABC)
{
return ABC;
}
好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml等数据.这里我们演示返回返回的数据有string、集合(List<>)、类.
但都返回Json格式(Json轻量级比XML处理起来简单).看看前台是怎么解析这些数据的.
代码如下:
前台页面:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>无标题页</title> 
<style type="text/css"> 
.hover 
{ 
cursor: pointer; /*小手*/ 
background: #ffc; /*背景*/ 
} 
</style> 
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script> 
<script type="text/javascript"> 
//无参数调用 
$(document).ready(function() { 
$('#btn1').click(function() { 
$.ajax({ 
type: "POST", //访问WebService使用Post方式请求 
contentType: "application/json", 
url: "Default2.aspx/HelloWorld", //调用WebService的地址和方法名称组合 ---- WsURL/方法名 
data: "{}", //这里是要传递的参数,格式为 data: "{paraName:paraValue}",下面将会看到 
dataType: 'json', //WebService 会返回Json类型 
success: function(result) { //回调函数,result,返回值 
alert(result.d); 
} 
}); 
}); 
}); 
//有参数调用 
$(document).ready(function() { 
$("#btn2").click(function() { 
$.ajax({ 
type: "POST", 
contentType: "application/json", 
url: "Default2.aspx/GetWish", 
data: "{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}", 
dataType: 'json', 
success: function(result) { 
alert(result.d); 
} 
}); 
}); 
}); 
//返回集合(引用自网络,很说明问题) 
$(document).ready(function() { 
$("#btn3").click(function() { 
$.ajax({ 
type: "POST", 
contentType: "application/json", 
url: "Default2.aspx/GetArray", 
data: "{i:10}", 
dataType: 'json', 
success: function(result) { 
$(result.d).each(function() { 
alert(this); 
$('#dictionary').append(this.toString() + " "); 
//alert(result.d.join(" | ")); 
}); 
} 
}); 
}); 
}); 
//返回复合类型 
$(document).ready(function() { 
$('#btn4').click(function() { 
$.ajax({ 
type: "POST", 
contentType: "application/json", 
url: "Default2.aspx/GetClass", 
data: "{}", 
dataType: 'json', 
success: function(result) { 
$(result.d).each(function() { 
//alert(this); 
$('#dictionary').append(this['ID'] + " " + this['Value']); 
//alert(result.d.join(" | ")); 
}); 
} 
}); 
}); 
}); 
//Ajax 为用户提供反馈,他们两个方法可以添加给jQuery对象在Ajax前后回调 
//但对与Ajax的监控,本身是全局性的 
$(document).ready(function() { 
$('#loading').ajaxStart(function() { 
$(this).show(); 
}).ajaxStop(function() { 
$(this).hide(); 
}); 
}); 
// 鼠标移入移出效果,多个元素的时候,可以使用“,”隔开 
$(document).ready(function() { 
$('btn').hover(function() { 
$(this).addClass('hover'); 
}, function() { 
$(this).removeClass('hover'); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input type="button" id="btn1" value="HelloWorld"/> 
<input type="button" id="btn2" value="传入参数"/> 
<input type="button" id="btn3" value="返回集合"/> 
<input type="button" id="btn4" value=" 返回复合类型"/> 
</div> 
<div id="dictionary">dictionary 
</div> 
</form> 
</body> 
</html>

后台.cs文件
using System; 
using System.Collections; 
using System.Collections.Generic; 
using System.Configuration; 
using System.Data; 
using System.Linq; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.HtmlControls; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Web.Services; 
public partial class Default2 : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
} 
[WebMethod] 
public static string HelloWorld() 
{ 
return "123--->456"; 
} 
[WebMethod] 
public static string ABC(string ABC) 
{ 
return ABC; 
} 
[WebMethod] 
public static string GetWish(string value1, string value2, string value3, int value4) 
{ 
return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4); 
} 
/// <summary> 
/// 返回集合 
/// </summary> 
/// <param name="i"></param> 
/// <returns></returns> 
[WebMethod] 
public static List<int> GetArray(int i) 
{ 
List<int> list = new List<int>(); 
while (i >= 0) 
{ 
list.Add(i--); 
} 
return list; 
} 
/// <summary> 
/// 返回一个复合类型 
/// </summary> 
/// <returns></returns> 
[WebMethod] 
public static Class1 GetClass() 
{ 
return new Class1 { ID = "1", Value = "牛年大吉" }; 
} 
public class Class1 
{ 
public string ID { get; set; } 
public string Value { get; set; } 
} 
}

利用Jquery让返回的各类数据(string、集合(List<>)、类)以Json数据格式返回,为什么要用到result.d
这里我们顺带讲下Json
Json简单讲就是Javascript对象或数组.
 Json形式一: javascript对象 { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }
Json形式二: javascript数组 [{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },
{ "firstName": "Jason", "lastName":"Hunterwang", "email": "bbbb"}]
当然javascript 数组和对象可以互相嵌套.如形式一中的"Brett"可以换成一个Js数组或Js对象.那微软的Ajax返回的是哪种形式呢.是第一种.
微软框架默认返回一个 { "d": "后台返回的数据" } 这里我们用以上示例中的测试到得比如
如上例的返回的是string类型的话Firefox调试如下

详谈 Jquery Ajax异步处理Json数据.

当返回的是List<>类型的话FireFox调试如下

详谈 Jquery Ajax异步处理Json数据.

返回的数据也是放在Js对象中的d属性里面 所以说这就是为什么我们老是用result.d来取微软的框架返回的数据.

方法一不常用.一般用得多的还是方法二.
方法二:(建一个一般处理程序即.ashx文件)
用这种方法一般是我们要在ashx文件里手动写好返回的Json格式的数据返回给前台用
ashx 你可以配成Json格式一或Json格式二
Default.aspx页面Js代码如下

$.ajax({ 
type: "POST", 
url: "Handler.ashx", 
dataType: "json", 
success: function(data){ 
alert(data.name); //返回的为 Json格式一(Js对象) 
/* 返回的为 Json格式二(Js对象) 
$(data).each(function(i) { 
alert(data[i].name); 
}); 
*/ 
} 
});

Handler.ashx 代码如下
<%@ WebHandler Language="C#" Class="Handler" %> 
using System; 
using System.Web; 
using System.Collections; 
using System.Collections.Generic; 
using System.Web.Script.Serialization; 
public class Handler : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
JavaScriptSerializer jss = new JavaScriptSerializer(); 
context.Response.ContentType = "text/plain"; 
// 返回的为Json格式一 Js对象 
string data = "{\"name\":\"wang\",\"age\":25}"; 
// 返回的为Json格式二 Js数组 
//string data = "[{\"name\":\"wang\",\"age\":25},{\"name\":\"zhang\",\"age\":22}]"; 
context.Response.Write(data); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
}

以上基本上就第二种方法,可能有人不喜欢拼字符串.那有什么好办法呢?答案是有.微软对Json有很好的支持.
拿上例子说我们只要把Handler.ashx改一下就可以了
Handler.ashx 代码如下
<%@ WebHandler Language="C#" Class="Handler" %> 
using System; 
using System.Web; 
using System.Collections; 
using System.Collections.Generic; // Dictionary<,> 键值对集合所需 
using System.Web.Script.Serialization; //JavaScriptSerializer 类所需 
public class Handler : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
JavaScriptSerializer jss = new JavaScriptSerializer(); 
context.Response.ContentType = "text/plain"; 
Dictionary<string, string> drow = new Dictionary<string, string>(); 
drow.Add("name", "Wang"); 
drow.Add("age", "24"); 
context.Response.Write(jss.Serialize(drow)); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
}

ASP.Net中的JavaScriptSerializer为我们提供了很好的方法

jss.Serialize(drow) 是把drow的Dictionary<string, int> (键和值的集合)数据类型转换成Json数据格式

调试结果如下图 (上面例子是输出了一个键值多集合即一个Json形式一的Js对象)

详谈 Jquery Ajax异步处理Json数据.

如果要输出Json形式二(Js数组)呢? 我们也只要改动一部分就了

Handler.ashx 代码如下

<%@ WebHandler Language="C#" Class="Handler" %> 
using System; 
using System.Web; 
using System.Collections; 
using System.Collections.Generic; 
using System.Web.Script.Serialization; 
public class Handler : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
JavaScriptSerializer jss = new JavaScriptSerializer(); 
context.Response.ContentType = "text/plain"; 
List<Dictionary<string, string>> _list = new List<Dictionary<string, string>>(); 
Dictionary<string, string> drow = new Dictionary<string, string>(); 
drow.Add("name", "Wang"); 
drow.Add("age", "24"); 
Dictionary<string, string> drow1 = new Dictionary<string, string>(); 
drow1.Add("name", "Zhang"); 
drow1.Add("age", "35"); 
_list.Add(drow); 
_list.Add(drow1); 
context.Response.Write(jss.Serialize(_list)); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
}

调试结果如下图 (上面例子是输出了Json形式二的Js数组)

详谈 Jquery Ajax异步处理Json数据.

 讲到这里基本概念也讲得差不多了. 这里再讲一个够常碰到的例子就是如何把DataTabel转换成Json格式从而好让前台页面调用.

就是在Handler.ashx写上一个方法 

/// <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); 
}

其实也有把Json格式转换成DataTabel格式,方法如下
/// <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以表格的形式显示出来
那么前台页面JS如下
$.ajax({ 
type: "POST", 
url: "Handler.ashx", 
dataType: "json", 
success: function(data){ 
var table = $("<table border='1'></table>"); 
for (var i = 0; i < data.length; i++) { 
o1 = data[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")); 
} 
});

由上例子 再讲两个Js知识点
1. 之前我们取Json里面的数据如果是返回的是数组的话是用data[i].name也可表示为data[i]["name"]
2. 如果要访问Js对象的所有属性那么遍历Js对象.
success: function(data){ 
$(data).each(function(i) { 
for(key in this) // 遍历Js对象的所有属性 
alert(data[i][key]); 
//这里就不能换成 data[i].key 否则key成了属性而不是上面的key变量 
}); 
}

也有把前台Json数据传到后台后解析成DataTabel
这里我把DataTabel软成Json和Json转成DataTabel写成一个例子.下载地址如下
源码下载
如果大家对asp.net的序列化与反序列化感兴趣想一探究竟的话

Javascript 相关文章推荐
javascript下IE与FF兼容函数收集
Sep 17 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
js异步编程小技巧详解
Aug 14 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 #Javascript
yepnope.js 异步加载资源文件
Sep 08 #Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 #Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 #Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 #Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 #Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 #Javascript
You might like
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
对python中return和print的一些理解
2017/08/18 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python3 读写文件换行符的方法
2018/04/09 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
python实现贪吃蛇双人大战
2020/04/18 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
英国现代市场:ARKET
2019/04/10 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
岗位说明书怎么写
2014/07/30 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
新员工入职感想
2015/08/07 职场文书
小组组名及励志口号
2015/12/24 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python