一、 简介

　　1、vue本身不支持发送AJAX请求，需要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件实现

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

　　3、参考：GitHub上搜索axios，查看API文档

二、 使用axios发送AJAX请求

　　1、安装axios并引入

　　 　　1、npm install axios -S        #直接下载axios组件，下载完毕后axios.js就存放在node_modules\axios\dist中

　　　　 2、网上直接下载axios.min.js文件

　　　　 3、通过script src的方式进行文件的引入

　　2、发送get请求

　　　　1、基本使用格式

　　　　　　格式1：axios([options])        #这种格式直接将所有数据写在options里，options其实是个字典

　　　　　　格式2：axios.get(url[,options]);

　　　　2、传参方式：
            　　  通过url传参
                　 通过params选项传参

　　　　3、案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>发送AJAX请求</title>
  6.     <script src="js/vue.js"></script>
  7.     <script src="js/axios.min.js"></script>
  8.     <script>
  9.         window.onload=function(){
  10.             new Vue({
  11.                 el:\'#itany\',
  12.                 data:{
  13.                     user:{
  14.                         name:\'alice\',
  15.                         age:19
  16.                     },
  17.                 },
  18.                 methods:{
  19.                     send(){
  20.                         axios({
  21.                             method:\'get\',
  22.                             url:\'http://www.baidu.com?name=tom&age=23\'
  23.                         }).then(function(resp){
  24.                             console.log(resp.data);
  25.                         }).catch(resp => {
  26.                             console.log(\'请求失败：\'+resp.status+\',\'+resp.statusText);
  27.                         });
  28.                     },
  29.                     sendGet(){
  30.                         axios.get(\'server.php\',{
  31.                             params:{
  32.                                 name:\'alice\',
  33.                                 age:19
  34.                             }
  35.                         })
  36.                         .then(resp => {
  37.                             console.log(resp.data);
  38.                         }).catch(err => {             //
  39.                             console.log(\'请求失败：\'+err.status+\',\'+err.statusText);
  40.                         });
  41.                     },
  42.                 }
  43.             });
  44.         }
  45.     </script>
  46. </head>
  47. <body>
  48.     <div id="itany">
  49.         <button @click="send">发送AJAX请求</button>
  50.  
  51.         <button @click="sendGet">GET方式发送AJAX请求</button>
  52.  
  53.     </div>
  54. </body>
  55. </html>

View Code

 

　　3、发送post请求（push,delete的非get方式的请求都一样）

　　　　1、基本使用格式

　　　　　　格式：axios.post(url,data,[options]);

　　　　2、传参方式

　　　　　　1、自己拼接为键值对

　　　　　　2、使用transformRequest，在请求发送前将请求数据进行转换

　　　　　　3、如果使用模块化开发，可以使用qs模块进行转换

　　　　　　4、注释：axios默认发送post数据时，数据格式是Request Payload，并非我们常用的Form Data格式，所以参数必须要以键值对形式传递，不能以json形式传参

　　　　3、案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>发送AJAX请求</title>
  6.     <script src="js/vue.js"></script>
  7.     <script src="js/axios.min.js"></script>
  8.     <script>
  9.         window.onload=function(){
  10.             new Vue({
  11.                 el:\'#itany\',
  12.                 data:{
  13.                     user:{
  14.                         name:\'alice\',
  15.                         age:19
  16.                     },
  17.                 },
  18.                 methods:{
  19.                     sendPost(){
  20.                         // axios.post(\'server.php\',{
  21.                         //         name:\'alice\',
  22.                         //         age:19
  23.                         // }) //该方式发送数据是一个Request Payload的数据格式，一般的数据格式是Form Data格式，所有发送不出去数据
  24.                         // axios.post(\'server.php\',\'name=alice&age=20&\') //方式1通过字符串的方式发送数据
  25.                         axios.post(\'server.php\',this.user,{  //方式2通过transformRequest方法发送数据，本质还是将数据拼接成字符串
  26.                             transformRequest:[
  27.                                 function(data){
  28.                                     let params=\'\';
  29.                                     for(let index in data){
  30.                                         params+=index+\'=\'+data[index]+\'&\';
  31.                                     }
  32.                                     return params;
  33.                                 }
  34.                             ]
  35.                         })
  36.                         .then(resp => {
  37.                             console.log(resp.data);
  38.                         }).catch(err => {
  39.                             console.log(\'请求失败：\'+err.status+\',\'+err.statusText);
  40.                         });
  41.                     },
  42.                 }
  43.             });
  44.         }
  45.     </script>
  46. </head>
  47. <body>
  48.     <div id="itany">
  49.         <button @click="send">发送AJAX请求</button>
  50.  
  51.         <button @click="sendGet">GET方式发送AJAX请求</button>
  52.  
  53.     </div>
  54. </body>
  55. </html>

View Code

 

　　4、发送跨域请求
    　　   1、须知：axios本身并不支持发送跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库

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

　　　　3、 安装vue-resource并引入    

　　　　　　　npm info vue-resource           #查看vue-resource 版本信息
   　　　　　　 cnpm install vue-resource -S #等同于cnpm install vue-resource -save

　　　　4、 基本使用方法（使用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]) 

　　　　5、案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>发送AJAX请求</title>
  8.     <script src="js/vue.js"></script>
  9.     <script src="js/axios.js"></script>
  10.     <script src="js/vue-resource.js"></script>
  11. </head>
  12.  
  13. <body>
  14. <div id="itany">
  15.     <a>{{name}}</a>
  16.  
  17.     <button v-on:click="send">sendJSONP</button>
  18.  
  19. </div>
  20. </body>
  21. <script>
  22.     new Vue({
  23.         el: \'#itany\',
  24.         data:{
  25.             name: \'alice\',
  26.             age: 19
  27.                     },
  28.         methods:{
  29.             send:function(){
  30. //                https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
  31.                 this.$http.jsonp(\'https://sug.so.360.cn/suggest\',
  32.                     {params:{
  33.                         word:\'a\'
  34.                     }}
  35.                 ).then(function (resp) {
  36.                     console.log(resp.data)
  37.                 })
  39.             }
  40.         }
  41.     })
  42. </script>
  43. </html>

基本返送方式

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>发送AJAX请求</title>
  8.     <script src="js/vue.js"></script>
  9.     <script src="js/axios.js"></script>
  10.     <script src="js/vue-resource.js"></script>
  11. </head>
  12.  
  13. <body>
  14. <div id="itany">
  15.     <a>{{name}}</a>
  16.  
  17.     <button v-on:click="send">sendJSONP</button>
  18.  
  19. </div>
  20. </body>
  21. <script>
  22.     new Vue({
  23.         el: \'#itany\',
  24.         data:{
  25.             name: \'alice\',
  26.             age: 19
  27.                     },
  28.         methods:{
  29.             send:function(){
  30. //                https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
  31.                 this.$http.jsonp(\'https://sug.so.360.cn/suggest\',
  32.                     {params:{
  33.                         word:\'a\'
  34.                     }}
  35.                 ).then(resp=> {
  36.                     console.log(resp.data)
  37.                 })
  39.             }
  40.         }
  41.     })
  42. </script>
  43. </html>

基本发送方式2 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>发送AJAX请求</title>
  8.     <script src="js/vue.js"></script>
  9.     <script src="js/axios.js"></script>
  10.     <script src="js/vue-resource.js"></script>
  11. </head>
  12. <body>
  13. <div id="itany">
  14.     <button v-on:click="send">向百度搜索发送JSONP请求</button>
  15. </div>
  16. </body>
  17. <script>
  18.     new Vue({
  19.         el:\'#itany\',
  20.         data:{
  21.             name:\'za\'
  22.         },
  23.         methods:{
  24.             send:function () {
  25.                 this.$http.jsonp(\'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su\',
  26.                     {params:{wd:\'a\'},
  27.                         jsonp:\'cb\', //百度使用的jsonp参数名为cb，所以需要修改,默认使用的是callbakc参数就不用修改
  28.                     }).then(function (resp) {
  29.                     console.log(resp.data)
  30.                 }).catch(function (err) {
  31.                     console.log(err)
  32.                 })
  33.             }
  34.         }
  37.     })
  38. </script>
  39. </html>

带jionsp参数的

 

版权声明：本文为xuanan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xuanan/p/7847233.html