1. 程式人生 > >為您解惑:jQuery中$.getJSON( )的使用方法簡介之獲取JSON格式的資料.........

為您解惑:jQuery中$.getJSON( )的使用方法簡介之獲取JSON格式的資料.........

jQuery中的$.getJSON( )方法函式主要用來從伺服器載入json編碼的資料,它使用的是GET HTTP請求。

使用方法:$.getJSON( url [, data ] [, success(data, textStatus, XHR) ] )

url是必選引數,表示json資料的地址即傳送的請求;
data是可選引數,用於請求資料時傳送的資料引數;
success是可選引數,這是一個回撥函式,用於請求成功時處理請求到的資料。

額外的引數:
     data(response) - 包含來自請求的結果資料(物件)
     texyStatus(status) - 包含請求的狀態
     XHR(xhr) - 包含 XMLHttpRequest 物件

此函式相當於簡寫的ajax()函式:

<span style="font-size:14px;">$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});</span>

例項如下:

a.  json檔案可以儲存為“test.json”這樣的檔案,json資料的一般格式如下(“{ }”中的為物件,“[ ]”中的為陣列):

<span style="font-size:14px;">{
"total":3,
"rows":[
   {
   "userId":1,
   "realName":"張梅",
   "headUrl":"href='teacherDetail.html'",
   "img":"src='images/teacher.jpg'",
   "introduction":"熱情大方。"
   },{
   "userId":2,
   "realName":"張三",
   "headUrl":"href='teacherDetail.html'",
   "img":"src='images/teacher.jpg'",
   "introduction":"熱情大方。"
   },{
   "userId":3,
   "realName":"李斯",
   "headUrl":"href='teacherDetail.html'",
   "img":"src='images/teacher.jpg'",
   "introduction":"熱情大方"
   }
]
}</span>

b. 通過$.getJSON獲取以上json資料:

<span style="font-size:14px;">$.getJSON('test.json', function(data){
   for (var i = 0; i < data.rows.length; i++) {
      $('#test').append('<p>' + data.rows[i].realName + '</p>');
   }
});</span>

PS:更多JSON檔案解析連結:

       (1)http://www.jb51.net/article/19366.htm

       (2)http://www.jb51.net/article/36678.htm