类似jquery源码jsonp跨域处理

最新推荐文章于 2023-07-16 11:14:19 发布

.NET跨平台

最新推荐文章于 2023-07-16 11:14:19 发布

阅读量1k

点赞数

分类专栏： Jquery及其组件文章标签： jsonp 源码 jquery 跨域

本文链接：https://blog.csdn.net/WuLex/article/details/51889255

版权

Jquery及其组件专栏收录该内容

147 篇文章 3 订阅

订阅专栏

html页面如下:

<!DOCTYPE html >
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="result"></div>
        <script src="js/cross.js" type="text/javascript"></script>
        <script type="text/javascript">
            (function() {
                $jsonp('http://api.douban.com/v2/movie/in_theaters', { count: 10, start: 5 },
                    function(data) {
                        document.getElementById('result').innerHTML = JSON.stringify(data);
                    });
            })();

//            function test(data) {
//                document.getElementById('result').innerHTML = JSON.stringify(data);
//            }
        </script>
    </body>
</html>

Cross.js内容如下:

 
(function(window,document){
  'use strict';
  var jsonp=function(url,data,callback){
    //1.挂载回调函数
    var cbFunName='my_json_cb'+Math.random().toString().replace(".","");
    window[cbFunName]=callback;
    //2.将data转换为url字符串的形式
    //{id:1,name:'zhangsan'}=>id=1&name=zhangsan
    var querystring=url.indexOf("?") == -1 ? "?" : "&";
    for(var key in data){
      querystring+=key+'='+data[key]+'&';
    }
    //3.处理url中的回调参数
    //url+=callback=my_json_cb3453454365465645
    querystring+='callback='+cbFunName;
    //4.创建一个script标签
    var scriptElement=document.createElement('script');
    scriptElement.src=url+querystring;
    //5.将script标签放到页面中
    document.body.appendChild(scriptElement);
  }
  window.$jsonp=jsonp;
})(window,document)

结果如下:

.NET跨平台

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
类似jquery源码jsonp跨域处理

html页面如下: (function() { $jsonp('http://api.douban.com/v2/movie/in_theaters', { count: 10, start: 5 },
复制链接

扫一扫