javascript和jQuery分别实现jsonp跨域请求

本文以豆瓣网上的接口数据为例演示jsonp的跨域请求,具体实现原理不再赘述,不懂得请先百度jsonp的原理后再来看此篇文章更有助于理解,再次强调只实现需求不讲解原理,默认已导入jquery库。
html部分只有一个按钮:

        <button type="button" id="btn">点击</button>

javascript部分:

$("#btn").click(function(){
            $.ajax({
                async : true,
                url : "https://api.douban.com/v2/book/search",
                type : "GET",
                dataType : "jsonp", // 返回的数据类型,设置为JSONP方式
                jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
                jsonpCallback: 'handleResponse', //设置回调函数名
                data : {
                    q : "javascript", 
                    count : 1
                }, 
                success: function(response, status, xhr){
                    console.log('状态为:' + status + ',状态是:' + xhr.statusText);
                    console.log(response);
                }
            });
        });

以上运行即可返回jsonp格式的数据 **;handleResponse(json数据) **

  • 附原生javascript实现jsonp跨域请求:
var script=document.createElement("script");
        script.src="https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
        document.body.insertBefore(script,document.body.firstChild);
    
        function handleResponse (res) {
            console.log(res)
        }

以上为两种方法实现jsonp跨域请求,亲测有效。
详细出处:http://blog.csdn.net/u014607184/article/details/52027879

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容