在使用Jquery + json 的過程中由于一個小問題沒有注意到,程序一直有錯誤。在網上找了很多JSON方面的文章但基本都是很簡單的舉例,所以我覺得有必要寫一個完整的JQuery + json 實現AJAX的例子,如果可以幫到別人那是最好,否則就當是給自己備忘了吧。
好啦,進入正題吧。
關于JSON的介紹網上有很多在這里只簡單介紹一下Json表示數據的格式:
? 對象是屬性、值對的集合。一個對象的開始于“{”,結束于“}”。每一個屬性名和值間用“:”提示,屬性間用“,”分隔。
? 數組是有順序的值的集合。一個數組開始于"[",結束于"]",值之間用","分隔。
? 值可以是引號里的字符串、數字、true、false、null,也可以是對象或數組。這些結構都能嵌套。
? 字符串和數字的定義和C或Java基本一致。
下面我們使用Ajax獲取訂單列表數據后格式化為Json的格式后輸出。首先我們建立data.ashx文件作為數據請求的處理頁面:
data.ashx 文件處理請求的方法:

Code
1 Arguments.OrderQuery Query;
2
3 public void ProcessRequest (HttpContext context)
4 {
5 string cmd = context.Request.QueryString["__cmd__"]; //命令
6 string pagenum = context.Request.QueryString["__pagenum__"];//頁數
7 string type = context.Request.QueryString["__type__"];//類型
8 result = new StringBuilder();
9 if (cmd == null || cmd == string.Empty || type==null || type==string.Empty)
10 {
11 context.Response.Write(result.ToString());
12 return;
13 }
14 switch (cmd)
15 {
16 case "getorder":
17 Query = new Arguments.OrderQuery();
18 Query.Status = new int[] { (int)Arguments.Named.OrderStatus.待發單, (int)Arguments.Named.OrderStatus.下發中, (int)Arguments.Named.OrderStatus.新訂單, (int)Arguments.Named.OrderStatus.已完成 };
19 Query.TimeStart = DateTime.Parse("2007-1-1 00:00:00");
20 Query.TimeEnd = DateTime.Now;
21 Query.PageSize = 25;
22 Query.PageIndex = WebCommon.Basal.ConvertInt(pagenum) - 1;
23 if (type == "custom")
24 {
25 Query.Email = context.Request.QueryString["__email__"];
26 Query.OrderCode = context.Request.QueryString["__ordercode__"];
27 }
28 else
29 {
30 Query.Email = string.Empty;
31 Query.OrderCode = string.Empty;
32 }
33
34 int recordnum = 0;
35 IList<Model.OrderInfo> OrderList = WebCommon.DataSource.SearchOrderList(Query, ref recordnum);
36 FormatJson(OrderList,recordnum); //格式化數據為Json的方法
37 context.Response.Write(result.ToString());
38 break;
39 }
40 }
41
42 ///<Summary>
43 ///將數據構造為Json格式
44 ///數據構造后的格式為:{order:[{OrderCode:200901010001,Status:下發單,CreateTime:2009-1-1}],Count:1}
45 ///</Summary>
46 private void FormatJson(IList<Model.OrderInfo> orderlist,int recordnum)
47 {
48 if (orderlist == null || orderlist.Count <= 0)
49 return;
50 result.Append("{Order:[");
51 for (int i = 0; i < orderlist.Count;i++)
52 {
53 result.Append("{OrderCode:\"" + orderlist[i].Code + "\",Status:\"" + FormatStatus(orderlist[i].Status) + "\",CreateTime:\"" + orderlist[i].CreateTime + "\"}");
54 if ((i + 1) < orderlist.Count)
55 result.Append(",");
56 }
57 int pagenum = recordnum % 25 > 0 ? (recordnum / 25) + 1 : recordnum / 25; //計算總頁數
58 result.Append("],Count:\""+pagenum+"\"}");
59 }
數據處理頁面寫好了,下面我們來寫一個前臺顯示頁面(display.aspx),在頁面中我們使用Jquery提供的.getJSON方式來訪問數據頁面。
JQuery的getJSON方法的原型:$.getJSON(Url,{data:data},callbackfunction)
url (String) : 發送請求地址。
data (Map) : (可選) 待發送 Key/value 參數。
callback (Function) : (可選) 載入成功時回調函數。
前臺顯示頁面文件 display.aspx的方法:

Code
1 Code
2 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 }
19
好了,就這兩步就基本搞定了。是不是很簡單啊。
由于Json是Javascript的一個子集,所以不論是使用方式還是執行效率相信都不會讓你失望的。