AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
jsonp跨域实例

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


jsonp跨域实例  
上一篇:AngularJS开发教程之控制器之间的通信方法分析  下一篇:JavaScript中数据类型转换总结