百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> 使用jsonp实现跨域获取数据实例讲解
分享文章到:

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

发布时间:01/15 来源: 浏览: 关键词:
这篇文章介绍了使用jsonp实现跨域获取数据的教程,给了实例代码,有需要的同学参考一下

js部分

(function(window, document) {
  'use strict';
  varjsonp =function(url, data, callback) {
    //1、挂载回调函数
    varfnsuffix = Math.random().toString().replace('.','');
    varcbFuncName ='my_json_cb'+ fnsuffix;
    window[cbFuncName] = callback;
    //2、将data转换成url字符串的形式
    //{id=1,count=4}==>id=1&count=4
    varquerystring = url.indexOf('?') == -1 ?'?':'&';  //判断url中最后是否有?,没有则为?
    for(varkeyindata) {
      querystring += key +'='+ data[key] +'&';
    }
    //3、处理url中回调函数 url+=callback=sdgade
    querystring +='callback='+ cbFuncName;
    //querystring=?id=1&count=4&callback=sdgade
    //4、创建一个script标签
    varscriptElement = 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>

结果可以返回结果,页面显示为,表示获取成功!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有23人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板