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

?

總結

以上是生活随笔為你收集整理的使用jquery+json实现ajax的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。