本文介绍如何使用jQuery实现JSONP跨域请求。通过设置$.ajax的dataType为jsonp并配置相关参数，可以轻松实现跨域数据获取。文中提供了具体的代码示例，包括动态按钮点击触发的跨域请求。
jQuery封装JSONP
对于经常用jQuery的开发者来说，能注意到jQuery封装的$.ajax中有一个dataType属性，如果将该属性设置成dataType:"jsonp"，就能实现JSONP跨域了。需要了解的一点是，虽然jQuery将JSONP封装在$.ajax中，但是其本质与$.ajax不一样。
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8"> <title>jQuery实现JSONP</title> </head>
<body>
<div id="mydiv"> <button id="btn">点击</button> </div>
</body>
<!--引入的jquery文件-->
<scripttype="text/javascript"src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<scripttype="text/javascript"> $(function(){ $("#btn").click(function(){
$.ajax({
async : true,
url : "https://api.douban.com/v2/book/search",
type : "GET",
dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
jsonpCallback: 'handleResponse', //设置回调函数名
data : {
q : "javascript",
count : 1
},
success: function(response, status, xhr){
console.log('状态为：' + status + ',状态是：' + xhr.statusText); console.log(response);
}
});
});
});
</script>
</html>
最后的结果与JavaScript通过动态添加<script>标签得到的结果是一样的。
通过$.getJSON(）
利用getJSON来实现，只要在地址中加上callback=?参数即可，参考代码如下：
$.getJSON("https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?", function(data){ console.log(data); });
这样也能实现跨域的功能。
扫一扫
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
