使用jquery+json實作ajax的方法

在使用Jquery + json 的過程中由于一個小問題沒有注意到，程式一直有錯誤。在網上找了很多JSON方面的文章但基本都是很簡單的舉例，是以我覺得有必要寫一個完整的JQuery + json 實作AJAX的例子，如果可以幫到别人那是最好，否則就當是給自己備忘了吧。

好啦，進入正題吧。

關于JSON的介紹網上有很多在這裡隻簡單介紹一下Json表示資料的格式:

對象是屬性、值對的集合。一個對象的開始于“{”，結束于“}”。每一個屬性名和值間用“:”提示，屬性間用“,”分隔。 

數組是有順序的值的集合。一個數組開始于"["，結束于"]"，值之間用","分隔。 

值可以是引号裡的字元串、數字、true、false、null，也可以是對象或數組。這些結構都能嵌套。 

字元串和數字的定義和C或Java基本一緻。 

下面我們使用Ajax擷取訂單清單資料後格式化為Json的格式後輸出。首先我們建立data.ashx檔案作為資料請求的處理頁面:

data.ashx 檔案處理請求的方法：

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的方法:

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