美文网首页
javascript和jQuery分别实现jsonp跨域请求

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

作者: 易冷zzz | 来源:发表于2017-07-04 18:01 被阅读11次

本文以豆瓣网上的接口数据为例演示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

相关文章

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

    本文以豆瓣网上的接口数据为例演示jsonp的跨域请求,具体实现原理不再赘述,不懂得请先百度jsonp的原理后再来看...

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

  • js跨域问题

    来源 javascript中实现跨域的方式总结 第一种方式:jsonp请求;jsonp的原理是利用 标签的跨域特性...

  • jsonp原理与实现

    原理 jsonp的本质是利用script标签的src属性进行跨域请求,只能用于get请求。 前端jquery实现 ...

  • 跨域实战解决方案

    一.跨域方案 1.JSONP跨域 (1)前端发起jQuery ajax 的get请求 $.getJSON...

  • 跨域上传图片并预览

    跨域上传文件 之前解决跨域问题都是使用的JQuery的JSONP类型的Ajax请求,JSONP原理是让服务器把数据...

  • JavaScript - GET/POST及跨域方法

    xhr 原生方法请求 window fetch 方法 关于跨域 利用JSONP实现跨域调用 使用 CORS(跨域资...

  • jsonp使用中遇到的问题 Uncaught SyntaxErr

    以前直接用jQuery的$.ajax({dataType:"jsonp"})方法做跨域请求,没有深入研究why和h...

  • jsonp

    参考:轻松搞定JSONP跨域请求参考:JavaScript 跨域总结与解决办法要理解跨域,先要了解一下“同源策略”...

  • 前端跨域请求原理及实践

    一、 跨域请求的含义 2.3 使用 标签原生实现 JSONP 经过上面的事件,你是不是觉得 JSONP 的实现和...

网友评论

      本文标题:javascript和jQuery分别实现jsonp跨域请求

      本文链接:https://www.haomeiwen.com/subject/apuxhxtx.html