首页 / JSON / JSONP实现

JSONP实现

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JSONP实现，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1233字，纯文字阅读大概需要2分钟。

内容图文

使用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实现 - 文章图片


更多JSONP实现相关文章请关注PHP中文网！

内容总结

以上是互联网集市为您收集整理的JSONP实现全部内容，希望文章能够帮你解决JSONP实现所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/303718.html

来源：【匿名】