本文以豆瓣网上的接口数据为例演示jsonp的跨域请求,具体实现原理不再赘述,不懂得请先百度jsonp的原理后再来看此篇文章更有助于理解,再次强调只实现需求不讲解原理,默认已导入jquery库。
html部分只有一个按钮:
<button type="button" id="btn">点击</button>
javascript部分:
$("#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);
}
});
});
以上运行即可返回jsonp格式的数据 **;handleResponse(json数据) **
-
附原生javascript实现jsonp跨域请求:
var script=document.createElement("script");
script.src="https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);
function handleResponse (res) {
console.log(res)
}
以上为两种方法实现jsonp跨域请求,亲测有效。
详细出处:http://blog.csdn.net/u014607184/article/details/52027879
网友评论