使用jquery+json实现ajax的方法

在使用Jquery + json 的过程中由于一个小问题没有注意到，程序一直有错误。在网上找了很多JSON方面的文章但基本都是很简单的举例，所以我觉得有必要写一个完整的JQuery + json 实现AJAX的例子，如果可以帮到别人那是最好，否则就当是给自己备忘了吧。

好啦，进入正题吧。

关于JSON的介绍网上有很多在这里只简单介绍一下Json表示数据的格式:

对象是属性、值对的集合。一个对象的开始于“{”，结束于“}”。每一个属性名和值间用“:”提示，属性间用“,”分隔。 
数组是有顺序的值的集合。一个数组开始于"["，结束于"]"，值之间用","分隔。 
值可以是引号里的字符串、数字、true、false、null，也可以是对象或数组。这些结构都能嵌套。 
字符串和数字的定义和C或Java基本一致。 
下面我们使用Ajax获取订单列表数据后格式化为Json的格式后输出。首先我们建立data.ashx文件作为数据请求的处理页面:

data.ashx 文件处理请求的方法：

1. Arguments.OrderQuery Query;  
2.  2   
3.  3 public void ProcessRequest (HttpContext context)   
4.  4     {  
5.  5         string cmd = context.Request.QueryString["__cmd__"]; //命令  
6.  6         string pagenum = context.Request.QueryString["__pagenum__"];//页数  
7.  7         string type = context.Request.QueryString["__type__"];//类型  
8.  8         result = new StringBuilder();          
9.  9         if (cmd == null || cmd == string.Empty || type==null || type==string.Empty)  
10. 10         {  
11. 11             context.Response.Write(result.ToString());  
12. 12             return;  
13. 13         }  
14. 14         switch (cmd)  
15. 15         {  
16. 16             case "getorder":  
17. 17                 Query = new Arguments.OrderQuery();  
18. 18                 Query.Status = new int[] { (int)Arguments.Named.OrderStatus.待发单, (int)Arguments.Named.OrderStatus.下发中, (int)Arguments.Named.OrderStatus.新订单, (int)Arguments.Named.OrderStatus.已完成 };                  
19. 19                 Query.TimeStart = DateTime.Parse("2007-1-1 00:00:00");  
20. 20                 Query.TimeEnd = DateTime.Now;  
21. 21                 Query.PageSize = 25;  
22. 22                 Query.PageIndex = WebCommon.Basal.ConvertInt(pagenum) - 1;  
23. 23                 if (type == "custom")  
24. 24                 {  
25. 25                     Query.Email = context.Request.QueryString["__email__"];  
26. 26                     Query.OrderCode = context.Request.QueryString["__ordercode__"];  
27. 27                 }  
28. 28                 else  
29. 29                 {  
30. 30                     Query.Email = string.Empty;  
31. 31                     Query.OrderCode = string.Empty;  
32. 32                 }  
33. 33                   
34. 34                 int recordnum = 0;  
35. 35                 IList<Model.OrderInfo> OrderList = WebCommon.DataSource.SearchOrderList(Query, ref recordnum);  
36. 36                 FormatJson(OrderList,recordnum);  //格式化数据为Json的方法                
37. 37                 context.Response.Write(result.ToString());  
38. 38                 break;  
39. 39         }  
40. 40     }  
41. 41   
42. 42     ///<Summary> 
43. 43     ///将数据构造为Json格式  
44. 44     ///数据构造后的格式为：{order:[{OrderCode:200901010001,Status:下发单,CreateTime:2009-1-1}],Count:1}  
45. 45     ///</Summary> 
46. 46     private void FormatJson(IList<Model.OrderInfo> orderlist,int recordnum)  
47. 47     {  
48. 48         if (orderlist == null || orderlist.Count <= 0)  
49. 49             return;  
50. 50         result.Append("{Order:[");  
51. 51         for (int i = 0; i < orderlist.Count;i++)  
52. 52         {  
53. 53             result.Append("{OrderCode:\"" + orderlist[i].Code + "\",Status:\"" + FormatStatus(orderlist[i].Status) + "\",CreateTime:\"" + orderlist[i].CreateTime + "\"}");  
54. 54             if ((i + 1) < orderlist.Count)  
55. 55                 result.Append(",");  
56. 56         }  
57. 57         int pagenum = recordnum % 25 > 0 ? (recordnum / 25) + 1 : recordnum / 25; //计算总页数  
58. 58         result.Append("],Count:\""+pagenum+"\"}");  
59. 59     } 

数据处理页面写好了，下面我们来写一个前台显示页面(display.aspx)，在页面中我们使用Jquery提供的.getJSON方式来访问数据页面。

JQuery的getJSON方法的原型：$.getJSON(Url,{data:data},callbackfunction)

url (String) : 发送请求地址。

data (Map) : (可选) 待发送 Key/value 参数。

callback (Function) : (可选) 载入成功时回调函数。

前台显示页面文件 display.aspx的方法:

function GetData(i)//取值方法,参数i表示页数
3 {
4 $.getJSON("data.ashx",{__cmd__:"getorder",__pagenum__:i.toString(),__type__:"all"},GetOrderCallBack);
5 }
6 
7 function GetOrderCallBack(data)
8 {
9 var result = data;
10 $("#tabOrderList").empty(); 
11 $.each(result.Order,function(i) //循环获取返回值Order列表中的数据
12 {
13 if(result.Order[i]==null)
14 return;
15 $("#tabOrderList").append("<tr><td>"+result.Order[i].OrderCode+"</td><td>"+result.Order[i].Status+"</td><td>"+result.Order[i].CreateTime+"</td></tr>");
16 }); 
17 $("#inptSum").val(result.Count);//从json中获取总页数 
18 }

好了，就这两步就基本搞定了。是不是很简单啊。

由于Json是Javascript的一个子集，所以不论是使用方式还是执行效率相信都不会让你失望的。

本文转自linzheng 51CTO博客，原文链接:http://blog.51cto.com/linzheng/1081645