Jquery getJSON方法詳細(xì)分析

2019-11-20 21:22:56

字體：大中小

供稿：網(wǎng)友

準(zhǔn)備工作
?Customer類

public class Customer
{
    public int Unid { get; set; }
    public string CustomerName { get; set; }
    public string Memo { get; set; }
    public string Other { get; set; }
}

?服務(wù)端處理（Json_1.ashx）

復(fù)制代碼代碼如下:

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請求得到j(luò)son數(shù)據(jù)
?url用于提供json數(shù)據(jù)的地址頁
?data(Optional)用于傳送到服務(wù)器的鍵值對
?callback(Optional)回調(diào)函數(shù)，json數(shù)據(jù)請求成功后的處理函數(shù)

復(fù)制代碼代碼如下:

function(data, textStatus) {
        // data是一個json對象
        // textStatus will be "success"
       this; // the options for this ajax request
}

（1）一個對象

復(fù)制代碼代碼如下:

$.getJSON(
    "webdata/Json_1.ashx",
    function(data) {
       $("#divmessage").text(data.CustomerName);
    }
);

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

所以在訪問時(shí)，以data.Property來訪問，下面以k/v循環(huán)來打印這條宋江的記錄：

復(fù)制代碼代碼如下:

$.getJSON(
    "webdata/Json_1.ashx",
    function(data) {
        var tt="";
        $.each(data, function(k, v) {
            tt += k + "：" + v + "<br/>";
        })
        $("#divmessage").html(tt);
});

結(jié)果：
Unid：1
CustomerName：宋江
Memo：天魁星
Other：黑三郎

（2）對象數(shù)組
Ashx文件（Json_1.ashx）修改：

復(fù)制代碼代碼如下:

List<Customer> _list = new List<Customer>();
Customer customer = new Customer
{ Unid=1,CustomerName="宋江",Memo="天魁星",Other="黑三郎"};
Customer customer2 = new Customer
{ Unid = 2, CustomerName = "吳用", Memo = "天機(jī)星", Other = "智多星" };

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

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

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

這里可以看到做為集合的json對象不是再一條記錄，而是2條記錄，是一個[[object,object]]數(shù)組：[object,object][object,object]，而每個[object,object]表示一條記錄，對應(yīng)一個Customer，其實(shí)也是k/v的形式，而這個v就是一個Customer對象，而這個k是從0開始的索引。

復(fù)制代碼代碼如下:

$.getJSON(
    "webdata/Json_1.ashx",
    function(data) {
        $.each(data, function(k, v) {
            alert(k);
        });
});

這時(shí)，k值為0,1……

列表json對象的方法：

復(fù)制代碼代碼如下:

$.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);
});