使用jsonp实现跨域获取数据实例讲解
更新时间：2016年12月25日 10:45:58 作者：沛东
这篇文章主要介绍了使用jsonp实现跨域获取数据实例讲解,需要的朋友可以参考下
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实现跨域获取数据实例讲解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家介绍如何有效的处理Promise并发示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要为大家详细介绍了微信小程序实现随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
本篇文章小编为大家介绍，关于JS判断图片是否加载完成且获取图片宽度的方法，有需要的朋友可以参考一下2013-04-04
这篇文章主要介绍了Javascript仿新浪游戏频道鼠标悬停显示子菜单效果,涉及鼠标事件及页面元素结点的遍历技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了Javascript实现可旋转的圆圈实例代码,可实现圆圈的旋转与运动效果,涉及javascript动态操作页面元素属性及进行相应数学运算的技巧,需要的朋友可以参考下2015-08-08
DataJoin(数据连接)是D3中很重要的一个概念。D3是基于数据操作DOM的js库，DataJoin使我们能够根据现有 HTML 文档中的数据集注入、修改和删除元素。本文主要和大家详细聊聊DataJoin的使用，感兴趣的可以学习一下2022-11-11
JavaScript允许你改变站点的CSS表示层。如果想把用户的眼球吸引到那些你希望他们关注的页面元素上，改变样式是极佳的（也是很普遍的）方式。2008-10-10
这篇文章主要介绍了JS实现的五级联动菜单效果,结合完整实例形式分析了js多级联动菜单的完整实现步骤,涉及JS数组遍历、扩展及元素节点操作相关技巧,需要的朋友可以参考下2017-02-02
这篇文章主要为大家详细介绍了Bootstrap框架的安装使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
本文主要介绍了svg实现的动态描边效果，文中分享了两个实例：1.一个简单的线一点一点画出来的效果；2.用同样的原理画一个“蓝胖子”。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论