使用jsonp实现跨域获取数据实例讲解
程序员文章站
2022-05-03 22:45:56
js部分
(function(window, document) {
'use strict';
var jsonp = function(url,...
js部分
(function(window, document) {
'use strict';
var jsonp = function(url, data, callback) {
//1、挂载回调函数
var fnsuffix = math.random().tostring().replace('.', '');
var cbfuncname = 'my_json_cb' + fnsuffix;
window[cbfuncname] = callback;
//2、将data转换成url字符串的形式
//{id=1,count=4}==>id=1&count=4
var querystring = url.indexof('?') == -1 ? '?' : '&'; //判断url中最后是否有？，没有则为？
for (var key in data) {
querystring += key + '=' + data[key] + '&';
}
//3、处理url中回调函数 url+=callback=sdgade
querystring += 'callback=' + cbfuncname;
//querystring=?id=1&count=4&callback=sdgade
//4、创建一个script标签
var scriptelement = document.createelement('script');
scriptelement.src = url + querystring;
//5、把script标签放到页面上
document.body.appendchild(scriptelement);
};
window.$jsonp = jsonp;
})(window, document)
在页面中测试
<!doctype html>
<html>
<head>
<title>jsonp</title>
</head>
<body>
<div id="htt"></div>
<script type="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实现跨域获取数据实例讲解，希望对大家有所帮助