$.getJSON()实现跨域请求代码实例

快乐打工仔 分类:实例代码

关于$.getJSON()基本用法可以参阅$.getJSON()用法代码实例介绍一章节。

它跨域请求的原理是jsonp方式,具体可以参阅JSONP用法详解一章节。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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://pipipi.net/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.pipipi.net和pipipi.net之间相互访问也属于跨域,所以上面的代码也属于跨域操作。

上面的代码成功演示了使用$.getJSON()的跨域请求效果,下面有几点要做一下说明。

(1).如果连接请求url地址没有jsoncallback=?这一块的话,就是普通的ajax请求,并不能够跨域。

(2).jsoncallback=?如果等号后面是问号(?),也就是没有显示的规定传递的回调函数名,那么jquery会随机生成一个。

特别说明:貌似等号后面只能是问号?,否则无法完成跨域请求。

回复

我来回复
  • 暂无回复内容