jQuery.getJSON()

admin發表於2017-02-24
jQueryJSON

jQuery.getJSON()方法用於通過HTTP GET形式的AJAX請求獲取遠端JSON編碼的資料。

此方法從伺服器獲得的JSON資料，jQuery會先嚐試將其轉為對應的JS物件。

如果請求URL包括"callback=?"等類似部分，jQuery會將其視作JSONP，並執行回撥函式來獲取JSON資料。

該方法通過非同步方式載入資料的。

此方法返回傳送該請求的jqXHR物件(jQuery1.4及以前版本返回的是原生的XMLHttpRequest物件)。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
jQuery.getJSON(url [, data ] [, success(data, textStatus, jqXHR) ])

引數解析:

（1）.url：一個包含傳送請求的URL字串。

（2）.data：可選，一個普通的物件或字串，用來傳送請求給伺服器。

（3）.success：請求成功時執行的回撥函式。data：是請求返回的資料，textStatus：是請求狀態文字(例如"success"、 "notmodified")，jqXHR：是當前jqXHR物件(jQuery1.4及之前版本，該引數為原生的XMLHttpRequest物件)。特別說明:只有在請求成功時此回撥函式才會生效，否則不做任何處理。

jQuery1.0版本新增。

程式碼例項:

此方法其實是$.ajax()的封裝，內部還是用$.ajax()實現的，看如下程式碼:

[JavaScript] 純文字檢視 複製程式碼
$.getJSON(url, data, success);
// 等價於如下程式碼:
$.ajax({
 url: url,
 type: "GET",
 data: data,
 success: success,
 dataType: "json"
});

再來看一個程式碼片段:

[JavaScript] 純文字檢視 複製程式碼
//獲取softwhy.php?type=json的json資料，但不作任何處理
$.getJSON( "softwhy.php?type=json" );
 
//softwhy.php?url=softwhy&age=3&address=青島市南區，等價於
$.getJSON( "softwhy.php?url=softwhy", "age=3&address=青島市南區" );
 
// 等價於 http://localhost/softwhy.php?id=5&orderId=5&money=100
$.getJSON( "http://localhost/softwhy.php?url=softwhy", {age:5,address:"青島市南區"} );
 
 
//上面的程式碼都沒有規定回撥函式，所以實際編碼中很少有如此應用
 
 
// 獲取index.php?type=json的JSON資料，獲取成功時彈出對話方塊
$.getJSON( "softwhy.php?type=json", function(data, textStatus, jqXHR){
  // data 是該請求返回的資料(可能經過處理)
  // textStatus 可能是"success"、 "notmodified"等
  // jqXHR 是經過jQuery封裝的XMLHttpRequest物件(保留其本身的所有屬性和方法)
 
 
  // 如果伺服器返回的JSON格式的資料是 {"id": 8, "name": "螞蟻部落"}
  // JSON格式的資料的屬性名稱必須加雙引號，字串值必須加雙引號。
  // jQuery已經將其轉換成對應的JS物件
  console.log( data.url ); // softwhy.com
  console.log( data.name ); // 螞蟻部落
});
 
 
// 獲取"/get.php?m=list&page=2&size=10"的JSON資料，獲取成功時彈出對話方塊
$.getJSON( "/action.php?m=list", {page:3,webName:"螞蟻部落"},function(data,textStatus,jqXHR){
  //如果伺服器返回的JSON格式的資料是[{"id":1, "title":"努力"}, {"id":2, "title":"奮鬥"}]
  //jQuery將獲取的JSON格式資料轉換為JS陣列
  for(var index in data){
    var obj = data[index];
    console.log( obj.title );
  }
});

完整程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
  $("#bt").click(function(){
    $.getJSON("demo/jQuery/ajax/txt/json.txt",function(msg){
      var data = msg
      str="";
      $.each(data,function(index, n){
        str=str+data[index].webName+","+data[index].url+","+data[index].age+"<br/>";
      });
      $("#show").html(str);
    });
  })
})
</script>
</head>
<body>
<div id="show"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

相關文章