$.getJSON()實現跨域請求程式碼例項

antzone發表於2017-04-08
JSON跨域

關於$.getJSON()基本用法可以參閱$.getJSON()用法程式碼例項介紹一章節。

它跨域請求的原理是jsonp方式，具體可以參閱JSONP用法詳解一章節。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("#bt").click(function () {
    var url = "http://softwhy.com/demo/ajax/net/jsonp.ashx?jsoncallback=?"
    var str = "<table>";
    $.getJSON(url, function (json) {
      $.each(json, function (index, obj) {
        $.each(obj, function (y, data) {
          str = str + "<tr>";
          str = str + "<td>" + data["username"]
          + "</td><td>" + data["address"]
          + "</td><td>" + data["score"] + "</td>";
          str = str + "</tr>";
        })
      })
      str = str + "</tr></table>";
      $("#antzone").html(str);
    })
  })
})
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

特別說明:在www.softwhy.com和softwhy.com之間相互訪問也屬於跨域，所以上面的程式碼也屬於跨域操作。

上面的程式碼成功演示了使用$.getJSON()的跨域請求效果，下面有幾點要做一下說明。

（1）.如果連線請求url地址沒有jsoncallback=?這一塊的話，就是普通的ajax請求，並不能夠跨域。

（2）.jsoncallback=?如果等號後面是問號(?)，也就是沒有顯示的規定傳遞的回撥函式名，那麼jquery會隨機生成一個。

特別說明:貌似等號後面只能是問號？,否則無法完成跨域請求。

相關文章