使用jsonp实现跨域获取数据实例讲解

时间：2021-05-25

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实现跨域获取数据实例讲解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章