使用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的一個子集，所以不論是使用方式還是執行效率相信都不會讓你失望的。