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


Posted in Javascript onDecember 25, 2016

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

Javascript 相关文章推荐
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
js中开关变量使用实例
Feb 24 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
详解react-redux插件入门
Apr 19 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
JavaScript中数据类型转换总结
Dec 25 #Javascript
javascript实现用户点击数量统计
Dec 25 #Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 #Javascript
js实现图片切换(动画版)
Dec 25 #Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 #Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 #Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 #Javascript
You might like
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
java必学必会之static关键字
2015/12/03 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
python更改已存在excel文件的方法
2018/05/03 Python
Django中使用Celery的方法示例
2018/11/29 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
四种会话跟踪技术
2015/05/20 面试题
采购员的工作职责
2013/12/26 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
预备党员转正材料
2014/12/19 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
SQLServer中exists和except用法介绍
2021/12/04 SQL Server