使用jsonp实现跨域获取数据实例讲解
js部分
(function(window,document){
'usestrict';
varjsonp=function(url,data,callback){
//1、挂载回调函数
varfnsuffix=Math.random().toString().replace('.','');
varcbFuncName='my_json_cb'+fnsuffix;
window[cbFuncName]=callback;
//2、将data转换成url字符串的形式
//{id=1,count=4}==>id=1&count=4
varquerystring=url.indexOf('?')==-1?'?':'&';//判断url中最后是否有？，没有则为？
for(varkeyindata){
querystring+=key+'='+data[key]+'&';
}
//3、处理url中回调函数url+=callback=sdgade
querystring+='callback='+cbFuncName;
//querystring=?id=1&count=4&callback=sdgade
//4、创建一个script标签
varscriptElement=document.createElement('script');
scriptElement.src=url+querystring;
//5、把script标签放到页面上
document.body.appendChild(scriptElement);
};
window.$jsonp=jsonp;
})(window,document)
在页面中测试
<!DOCTYPEhtml>
<html>
<head>
<title>jsonp</title>
</head>
<body>
<divid="htt"></div>
<scripttype="text/javascript"src="http.js"></script>
<script>
(function(){
$jsonp('http://api.douban.com/v2/movie/in_theaters',{},
function(data){
document.getElementById('htt').innerHTML=JSON.stringify(data);
});
})()
</script>
</body>
</html>
结果可以返回结果，页面显示为，表示获取成功！
以上所述是小编给大家介绍的使用jsonp实现跨域获取数据实例讲解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！