Jquery getJSON方法詳細分析_jquery-js教程-PHP中文網

Jquery getJSON方法詳細分析_jquery

WBOY

發布： 2016-05-16 17:07:10

原創

1078 人瀏覽過

準備工作
·Customer類

public class Customer
{
    public int Unid { get; set; }
    public string CustomerName { get; set; }
 ; 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物件
      ajax request
}

（1）一個物件

複製碼🎜> 程式碼如下:$.getJSON( "webdata/Json_1.ashx", function(pdivmes) { }

);

向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) { $.each(data, function(k, v) { tt = k "：" v "
";});

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




（2）物件陣列

Ashx檔案（Json_1.ashx）修改：

🎜>
程式碼如下:
List _list = new List();

Customer customer = new Customer 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
 ashx",
    function(data) {
        $.each(data, function(k, v) {
     ); );
 

這時，k值為0,1……

列表json物件的方法：

複製程式碼程式碼如下:

 程式碼如下:


$. (
    "webdata/Json_1.ashx",
    function(data) {
        var tt = "                 tt = kk "：" vv "
";        $("#divmessage") .html(tt);
});


結果：
Unid：1

CustomerName：宋江
Memo：天魁星
Other：黑三郎
Unid：2
CustomerName：吳用
Memo：天機星
Other：智多星

這裡用了巢狀循環，第一個迴圈用於從List遍歷Customer對象，第二個迴圈用於從Customer物件遍歷Customer物件的屬性，也就是k/v對。