vue-使用vue-resource发送jsonp跨域请求

一、简介

vue本身不支持发送ajax请求，需要使用vue-resourse（vue1.0官方推荐使用）、axios（vue2.0官方推荐使用）等插件来支持发送ajax请求。

axios是一个基于Promise的请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resourse进行更新和维护。

 参考：GitHub上搜索 vue-resource ，查看API文档：https://github.com/pagekit/vue-resource

 

二、使用vue-resource发送跨域请求

2.1安装vue-resource并引入

1、运行npm info vue-resource，查看vue-resource的最新版本。可以看到最新版本为1.5.3

 

2、运行 cnpm install vue-resource，下载vue-resource保存。

 

 3、下载完成后，找到对应的文件夹。

 

 4、打开vue-resource文件夹，找到dist文件夹下面的js文件。

 

 5、将vue-resource.min.js放到项目中js文件夹下。

 

2.2 vue-resource的基本用法

1、HTML文件中引入vue-resource

2、基本语法

使用this.$http发送请求

　　　　this.$http.get(url, [options])

　　　　this.$http.head(url, [options])

　　　　this.$http.delete(url, [options])

　　　　this.$http.jsonp(url, [options])

　　　　this.$http.post(url, [body], [options])

　　　　this.$http.put(url, [body], [options])

　　　　this.$http.patch(url, [body], [options])

 3、使用方法

代码实现的功能：1）实现向360搜索发送JSONP请求，跨域访问360搜索结果  2）向百度搜索发送JSONP请求，跨域访问百度搜索结果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>发送ajax请求</title>
 6 <!--  引入vue-->
 7   <script src="../js/vue.js"></script>
 8   <!-- 引入vue-resource -->
 9   <script src="../js/vue-resource.min.js"></script>
10 
11   <script>
12     window.onload=function(){
13       new Vue({
14         el:'#hello',
15         //data用来存储数据
16         data:{
17          
18         },
19         //methods用来存储方法
20         methods:{
21           //向360搜索发送JSONP请求
22           sendJSONPto360(){
23             //  https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&src=so_home&fields=word&word=a&huid=11QenPUefPx7EvDq%2B2xnHt2HIpjcbtUGiaee124OidWCM%3D&llbq=A5%2CB5%2CC5%2CD5&cache=&id=
24             this.$http.jsonp('https://sug.so.360.cn/suggest',{
25               params:{
26                 word:'a'  //360要搜索的内容
27               },
28               //jsonp:'callback', //百度使用的jsonp参数名为callback，因为默认参数名也是callback，因此这行代码可以不写
29             }).then(resp=>{
30               console.log('向360搜索发送请求成功',resp.body.result)
31             }).catch(err=>{
32               console.log('向360搜索发送请求失败',err)
33             });
34           },
35 
36           //向百度搜索发送JSONP请求
37           sendJSONPToBaidu(){
38             // https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1420_21118_17001_21931_23632_22072&req=2&csor=1&cb=jQuery110208075694879886905_1498805938134&_=1498805938138
39             this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
40               params:{
41                 wd:'a'    //百度要搜索的内容
42               },
43               jsonp:'cb', //百度使用的jsonp参数名为cb，所以需要修改
44             }).then(resp=>{
45               console.log('向百度搜索发送请求成功',resp.body.s)
46             }).catch(err=>{
47               console.log('向百度搜索发送请求失败',err)
48             });
49           }
50 
51 
52         },
53       })
54     }
55   </script>
56 </head>
57 <body>
58 <div id="hello">
59  <button @click='sendJSONPto360'>向360搜索发送JSONP请求</button>
60  <button @click='sendJSONPToBaidu'>向百度搜索发送JSONP请求</button>
61 </div>
62 </body>
63 </html>

4、实现结果

 

posted @ 2021-08-25 17:15  AnnLing  阅读(788)  评论(0)    收藏  举报