三种方式使用 jsonp 实现跨域

之前一直不了解 jsonp 是怎么使用的，工作之余研究了一下，常用的三种方式。

• 原生 js
• jQuery
• vue

注意： jsonp 只能是 get 请求；

一、 使用原生 js 实现 jsonp 跨域

步骤：

• 监听input 输入框的值改变；
• 创建script 标签，设置 src 的指向，其中 wd的值是请求的参数，cb的值 是设置的回调函数名称；
• 将 script 标签插入到 DOM 中；
• 请求成功后cbFn会执行，数据成功打印；

二、 使用jQuery 实现 jsonp 跨域

步骤：

• 监听 input 值改变；
• 使用 jQuery发送 Ajax 请求
• 返回渲染数据

三、 使用vue 实现 jsonp 跨域

    
    
    
    



    
    

        

            {{item}}
        
    

步骤：

• watch 监听input 的值改变，发送请求。
• 返回数据渲染；

OK 大功告成！
github源码地址