jQuery封装JSONP

jQuery封装JSONP

对于经常用jQuery的开发者来说,能注意到jQuery封装的$.ajax中有一个dataType属性,如果将该属性设置成dataType:"jsonp",就能实现JSONP跨域了。需要了解的一点是,虽然jQuery将JSONP封装在$.ajax中,但是其本质与$.ajax不一样。

 

 <html lang="en"> <head>

 <meta charset="UTF-8"> <title>jQuery实现JSONPtitle> head> 

<body> 

<div id="mydiv"> <button id="btn">点击button> div>

 body> 

<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通过动态添加

你可能感兴趣的:(jquery)