在使用Jquery + json 的過程中由于一個小問題沒有注意到，程序一直有錯誤。在網(wǎng)上找了很多JSON方面的文章但基本都是很簡單的舉例，所以我覺得有必要寫一個完整的JQuery + json 實現(xiàn)AJAX的例子，如果可以幫到別人那是最好，否則就當(dāng)是給自己備忘了吧。
好啦，進(jìn)入正題吧。
關(guān)于JSON的介紹網(wǎng)上有很多在這里只簡單介紹一下Json表示數(shù)據(jù)的格式:
? 對象是屬性、值對的集合。一個對象的開始于“{”，結(jié)束于“}”。每一個屬性名和值間用“:”提示，屬性間用“,”分隔。
? 數(shù)組是有順序的值的集合。一個數(shù)組開始于"["，結(jié)束于"]"，值之間用","分隔。
? 值可以是引號里的字符串、數(shù)字、true、false、null，也可以是對象或數(shù)組。這些結(jié)構(gòu)都能嵌套。
? 字符串和數(shù)字的定義和C或Java基本一致。
下面我們使用Ajax獲取訂單列表數(shù)據(jù)后格式化為Json的格式后輸出。首先我們建立data.ashx文件作為數(shù)據(jù)請求的處理頁面:
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__"];//頁數(shù)
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.待發(fā)單, (int)Arguments.Named.OrderStatus.下發(fā)中, (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); //格式化數(shù)據(jù)為Json的方法
37 context.Response.Write(result.ToString());
38 break;
39 }
40 }
41
42 ///<Summary>
43 ///將數(shù)據(jù)構(gòu)造為Json格式
44 ///數(shù)據(jù)構(gòu)造后的格式為：{order:[{OrderCode:200901010001,Status:下發(fā)單,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; //計算總頁數(shù)
58 result.Append("],Count:\""+pagenum+"\"}");
59 }
數(shù)據(jù)處理頁面寫好了，下面我們來寫一個前臺顯示頁面(display.aspx)，在頁面中我們使用Jquery提供的.getJSON方式來訪問數(shù)據(jù)頁面。
JQuery的getJSON方法的原型：$.getJSON(Url,{data:data},callbackfunction)
url (String) : 發(fā)送請求地址。
data (Map) : (可選) 待發(fā)送 Key/value 參數(shù)。
callback (Function) : (可選) 載入成功時回調(diào)函數(shù)。
前臺顯示頁面文件 display.aspx的方法:
Code
1 Code
2 function GetData(i)//取值方法,參數(shù)i表示頁數(shù)
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) //循環(huán)獲取返回值Order列表中的數(shù)據(jù)
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中獲取總頁數(shù)
18 }
19
好了，就這兩步就基本搞定了。是不是很簡單啊。
由于Json是Javascript的一個子集，所以不論是使用方式還是執(zhí)行效率相信都不會讓你失望的。