DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> Jquery getJSON方法詳細分析
Jquery getJSON方法詳細分析
編輯:JQuery特效代碼     

准備工作
·Customer類
. 代碼如下:
public class Customer
{
    public int Unid { get; set; }
    public string CustomerName { get; set; }
    public string Memo { get; set; }
    public string Other { get; set; }
}

·服務端處理(Json_1.ashx)
. 代碼如下:
Customer customer = new Customer
      { Unid=1,CustomerName="宋江",Memo="天魁星",Other="黑三郎"};
string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);

context.Response.Write(strJson);

(一)Jquery. getJSON

方法定義:jQuery.getJSON( url, data, callback )

通過get請求得到json數據
·url用於提供json數據的地址頁
·data(Optional)用於傳送到服務器的鍵值對
·callback(Optional)回調函數,json數據請求成功後的處理函數
. 代碼如下:
function(data, textStatus) {
        // data是一個json對象
        // textStatus will be "success"
       this; // the options for this ajax request
}

(1)一個對象
. 代碼如下:
$.getJSON(
    "webdata/Json_1.ashx",
    function(data) {
       $("#divmessage").text(data.CustomerName);
    }
);

向Json_1.ashx地址請求json數據,接收到數據後,在function中處理data數據。 這裡的data的數據是一條記錄,對應於一個customer實例,其中的數據以k/v形式存在。即以[object,object]數組形式存在。
{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"}

所以在訪問時,以data.Property來訪問,下面以k/v循環來打印這條宋江的記錄:
. 代碼如下:
$.getJSON(
    "webdata/Json_1.ashx",
    function(data) {
        var tt="";
        $.each(data, function(k, v) {
            tt += k + ":" + v + "<br/>";
        })
        $("#divmessage").html(tt);
});

結果:
Unid:1
CustomerName:宋江
Memo:天魁星
Other:黑三郎

(2)對象數組
Ashx文件(Json_1.ashx)修改:
. 代碼如下:
List<Customer> _list = new List<Customer>();
Customer customer = new Customer
       { Unid=1,CustomerName="宋江",Memo="天魁星",Other="黑三郎"};
Customer customer2 = new Customer
       { Unid = 2, CustomerName = "吳用", Memo = "天機星", Other = "智多星" };

_list.Add(customer);
_list.Add(customer2);
string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(_list);

它生成的json對象的字符串是:

[{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"},
{"Unid":2,"CustomerName":"吳用","Memo":"天機星","Other":"智多星"}]

這裡可以看到做為集合的json對象不是再一條記錄,而是2條記錄,是一個[[object,object]]數組:[object,object][object,object],而每個[object,object]表示一條記錄,對應一個Customer,其實也是k/v的形式,而這個v就是一個Customer對象,而這個k是從0開始的索引。
. 代碼如下:
$.getJSON(
    "webdata/Json_1.ashx",
    function(data) {
        $.each(data, function(k, v) {
            alert(k);
        });
});

這時,k值為0,1……

列表json對象的方法:
. 代碼如下:
$.getJSON(
    "webdata/Json_1.ashx",
    function(data) {
        var tt = "";
        $.each(data, function(k, v) {
            $.each(v,function(kk, vv) {
                tt += kk + ":" + vv + "<br/>";
            });
        });
        $("#divmessage").html(tt);
});

結果:
Unid:1
CustomerName:宋江
Memo:天魁星
Other:黑三郎
Unid:2
CustomerName:吳用
Memo:天機星
Other:智多星
 

這裡用了嵌套循環,第一個循環用於從List中遍歷Customer對象,第二個循環用於從Customer對象中遍歷Customer對象的屬性,也就是k/v對。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved