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

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

        

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

你可能感兴趣的:(javascript和jQuery分别实现jsonp跨域请求)