当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 使用jsonp实现跨域获取数据实例讲解

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

2019年04月03日  | 移动技术网IT编程  | 我要评论

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实现跨域获取数据实例讲解，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网