使用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 相关文章推荐
jquery操作select option 的代码小结
Jun 21 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
小程序开发之模态框组件封装
Apr 23 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
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
Python和Sublime整合过程图示
2019/12/25 Python
Python datetime 如何处理时区信息
2020/09/02 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
七年级生物教学反思
2014/01/30 职场文书
解除合同协议书
2014/04/17 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技
python 镜像环境搭建总结
2022/09/23 Python