09-Vue中的Ajax请求

vue-resource的介绍

vue-resource是Vue高度集成的第三方包。

官网链接：

vue-resource 依赖于 Vue。所以，我们要按照先后顺序，导入vue.js和vue-resource.js文件。

解释：

vue.js文件向Windows对象暴露了Vue这个关键词；vue-resource.js向Vue身上挂载了this.$http这个属性。于是，我们可以直接写this.$http.get或者this.$http.post或者this.$http.jsonp来调用。

vue-resource 发送Ajax请求

常见的数据请求类型包括：get、post、jsonp。下面我们分别讲一讲。

get 请求

格式举例：

  1.     this.$http.get(url)
  2.         .then(function (result) { // 当发起get请求之后，通过 .then 来设置成功的回调函数
  3.             console.log(result.body); // response.body就是服务器返回的成功的数据
  4.             var result = result.body;
  5.         },
  6.             function (err) {
  7.                 //err是异常数据
  8.             });

获取到的response.body就是要获取的数据，但直接打印出来是 object，所以要记得转成string。

举例：获取数据

现规定，获取品牌数据的 api 接口说明如下：

09-Vue中的Ajax请求 - 图1

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <style>
  8.     #app {
  9.         width: 800px;
  10.         margin: 20px auto;
  11.     }
  13.     #tb {
  14.         width: 800px;
  15.         border-collapse: collapse;
  16.         margin: 20px auto;
  17.     }
  19.     #tb th {
  20.         background-color: #0094ff;
  21.         color: white;
  22.         font-size: 16px;
  23.         padding: 5px;
  24.         text-align: center;
  25.         border: 1px solid black;
  26.     }
  28.     #tb td {
  29.         padding: 5px;
  30.         text-align: center;
  31.         border: 1px solid black;
  32.     }
  33.     </style>
  34.     <script src="../vue.js"></script>
  35.     <script src="../vue-resource121.js"></script>
  36. </head>
  38. <body>
  39.     <div id="app">
  40.         <input type="text" v-model="id">
  41.         <input type="text" v-model="pname">
  42.         <button>添加数据</button>
  44.         <table id="tb">
  45.             <tr>
  46.                 <th>编号</th>
  47.                 <th>名称</th>
  48.                 <th>创建时间</th>
  49.                 <th>操作</th>
  50.             </tr>
  51.             <tr v-for="item in list">
  52.                 <td>{{item.id}}</td>
  53.                 <td>{{item.name}}</td>
  54.                 <td>{{item.ctime}}</td>
  55.                 <td>
  56.                 <a href="javascript:void(0)">删除</a>
  57.                 </td>
  58.             </tr>
  59.         </table>
  60.     </div>
  61. </body>
  62. <script>
  64.  new Vue({
  65.     el :'#app',
  66.     data:{
  67.         list:[]
  68.     },
  69.     // Vue对象实例创建成功以后就会自动调用这个方法
  70.     created:function(){
  71.         this.getlist();
  72.     },
  73.     methods:{
  74.         getlist:function(){
  75.             // 请求服务器的api获取到品牌的数据列表
  76.             this.$http.get('http://vueapi.ittun.com/api/getprodlist')
  77.             .then(function(response){
  78.                 // 1、处理服务器异常信息提示
  79.                 if(response.body.status != 0){
  80.                     alert(response.body.message);
  81.                     return;
  82.                 }
  84.                 // 2、处理正常的数据逻辑
  85.                this.list =  response.body.message;  //直接将数据放到list数组当中，页面就会自动显示
  86.                console.log(this.list);
  87.             });
  88.         }
  89.     }
  90.  });
  91. </script>
  93. </html>

上方代码中，我们用到了生命周期函数created，意思是：程序一加载，就马上在created这个函数里执行getlist()方法。

运行的结果如下：

09-Vue中的Ajax请求 - 图2

如果我直接在浏览器中输入请求的url，获取的json数据如下：（可以看到，这种方式获取的是相同的数据）

09-Vue中的Ajax请求 - 图3

post请求

格式举例：

  1.     // 方法：$http.post(url, 传给服务器的请求体中的数据， {emulateJSON:true})
  2.     // 通过 post 方法的第三个参数{ emulateJSON: true } ，来设置 提交的内容类型 为 普通表单数据格式
  3.     this.$http.post(url, { name: '奔驰' }, { emulateJSON: true })
  4.         .then(function (response) {
  5.             alert(response.body.message);
  6.         },
  7.             function (error) {
  9.             });

上方代码中，post()方法中有三个参数，其中第三个参数是固定值，照着写就可以了。

代码举例：（添加数据）

现规定，添加品牌数据的 api 接口说明如下：

09-Vue中的Ajax请求 - 图4

代码如下：（在上一段代码的基础之上，添加代码）

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <style>
  8.         #app {
  9.             width: 800px;
  10.             margin: 20px auto;
  11.         }
  13.         #tb {
  14.             width: 800px;
  15.             border-collapse: collapse;
  16.             margin: 20px auto;
  17.         }
  19.         #tb th {
  20.             background-color: #0094ff;
  21.             color: white;
  22.             font-size: 16px;
  23.             padding: 5px;
  24.             text-align: center;
  25.             border: 1px solid black;
  26.         }
  28.         #tb td {
  29.             padding: 5px;
  30.             text-align: center;
  31.             border: 1px solid black;
  32.         }
  33.     </style>
  34.     <script src="vue.js"></script>
  35.     <script src="vue-resource121.js"></script>
  36. </head>
  38. <body>
  39.     <div id="app">
  40.         <input type="text" v-model="pname">
  41.         <button @click="adddata">添加数据</button>
  43.         <table id="tb">
  44.             <tr>
  45.                 <th>编号</th>
  46.                 <th>名称</th>
  47.                 <th>创建时间</th>
  48.                 <th>操作</th>
  49.             </tr>
  50.             <tr v-for="item in list">
  51.                 <td>{{item.id}}</td>
  52.                 <td>{{item.name}}</td>
  53.                 <td>{{item.ctime}}</td>
  54.                 <td>
  55.                     <a href="javascript:void(0)">删除</a>
  56.                 </td>
  57.             </tr>
  58.         </table>
  59.     </div>
  60. </body>
  61. <script>
  63.     new Vue({
  64.         el: '#app',
  65.         data: {
  66.             pname: '', //这个 pname 是我在输入框里添加的数据。我们要把这个传给服务器
  67.             list: []
  68.         },
  69.         // Vue对象实例创建成功以后就会自动调用这个方法
  70.         created: function () {
  71.             this.getlist();
  72.         },
  73.         methods: {
  74.             //ajax请求：添加数据
  75.             adddata: function () {
  76.                 // 1、获取用户填写的文本框的值只需要通过this.pname即可
  77.                 // 2、调用ajax的post方法将数据上传到服务器
  78.                 var url = 'http://vueapi.ittun.com/api/addproduct';
  79.                 var postData = { name: this.pname };  //【重要】键`name`是json中约定好的字段。我们把这个字段传给服务器
  80.                 var options = { emulateJSON: true };
  81.                 this.$http.post(url, postData, options).then(function (response) {
  82.                     if (response.body.status != 0) {
  83.                         alert(response.body.message);
  84.                         return;
  85.                     }
  87.                     this.pname = '';
  89.                     // 3、添加完成后，只需要手动再调用一次getlist（将列表数据重新加载一次），即可刷新页面上的数据
  90.                     this.getlist();
  92.                 });
  93.             },
  95.             //ajax请求：获取数据
  96.             getlist: function () {
  97.                 this.$http.get('http://vueapi.ittun.com/api/getprodlist')
  98.                     .then(function (response) {
  99.                         // 1、处理服务器异常信息提示
  100.                         if (response.body.status != 0) {
  101.                             alert(response.body.message);
  102.                             return;
  103.                         }
  105.                         // 2、处理正常的数据逻辑
  106.                         this.list = response.body.message;
  107.                         console.log(this.list);
  108.                     });
  109.             }
  110.         }
  111.     });
  112. </script>
  114. </html>

代码举例：（删除数据）

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <style>
  8.         #app {
  9.             width: 800px;
  10.             margin: 20px auto;
  11.         }
  13.         #tb {
  14.             width: 800px;
  15.             border-collapse: collapse;
  16.             margin: 20px auto;
  17.         }
  19.         #tb th {
  20.             background-color: #0094ff;
  21.             color: white;
  22.             font-size: 16px;
  23.             padding: 5px;
  24.             text-align: center;
  25.             border: 1px solid black;
  26.         }
  28.         #tb td {
  29.             padding: 5px;
  30.             text-align: center;
  31.             border: 1px solid black;
  32.         }
  33.     </style>
  34.     <script src="vue.js"></script>
  35.     <script src="vue-resource121.js"></script>
  36. </head>
  38. <body>
  39.     <div id="app">
  40.         <input type="text" v-model="pname">
  41.         <button @click="adddata">添加数据</button>
  43.         <table id="tb">
  44.             <tr>
  45.                 <th>编号</th>
  46.                 <th>名称</th>
  47.                 <th>创建时间</th>
  48.                 <th>操作</th>
  49.             </tr>
  50.             <tr v-for="item in list">
  51.                 <td>{{item.id}}</td>
  52.                 <td>{{item.name}}</td>
  53.                 <td>{{item.ctime}}</td>
  54.                 <td>
  55.                     <!-- 具体要删除哪个item，不能写死。所以要根据id来删 -->
  56.                     <a href="javascript:void(0)" @click="deldata(item.id)">删除</a>
  57.                 </td>
  58.             </tr>
  59.         </table>
  60.     </div>
  61. </body>
  62. <script>
  64.     new Vue({
  65.         el: '#app',
  66.         data: {
  67.             pname: '', //这个 pname 是我在输入框里添加的数据。我们要把这个传给服务器
  68.             list: []
  69.         },
  70.         // Vue对象实例创建成功以后就会自动调用这个方法
  71.         created: function () {
  72.             this.getlist();
  73.         },
  74.         methods: {
  75.             //ajax请求：添加数据
  76.             adddata: function () {
  77.                 // 1、获取用户填写的文本框的值只需要通过this.pname即可
  78.                 // 2、调用ajax的post方法将数据上传到服务器
  79.                 var url = 'http://vueapi.ittun.com/api/addproduct';
  80.                 var postData = { name: this.pname };  //【重要】键`name`是json中约定好的字段。我们把这个字段传给服务器
  81.                 var options = { emulateJSON: true };
  82.                 this.$http.post(url, postData, options).then(function (response) {
  83.                     if (response.body.status != 0) {
  84.                         alert(response.body.message);
  85.                         return;
  86.                     }
  88.                     this.pname = '';
  90.                     // 3、直接将列表数据重新加载一次，即可刷新页面上的数据
  91.                     this.getlist();
  93.                 });
  94.             },
  96.             //ajax请求：获取数据
  97.             getlist: function () {
  98.                 this.$http.get('http://vueapi.ittun.com/api/getprodlist')
  99.                     .then(function (response) {
  100.                         // 1、处理服务器异常信息提示
  101.                         if (response.body.status != 0) {
  102.                             alert(response.body.message);
  103.                             return;
  104.                         }
  106.                         // 2、处理正常的数据逻辑
  107.                         this.list = response.body.message;
  108.                         console.log(this.list);
  109.                     });
  110.             },
  112.             // ajax请求：删除数据
  113.             deldata: function (id) {
  114.                 this.$http.get('http://vueapi.ittun.com/api/delproduct/' + id)
  115.                     .then(function (response) {
  116.                         if (response.body.status != 0) {
  117.                             alert(response.body.message);
  118.                             return;
  119.                         }
  121.                         // 刷新列表
  122.                         this.getlist();
  123.                     });
  124.             }
  125.         }
  126.     });
  127. </script>
  129. </html>

jsonp

09-Vue中的Ajax请求 - 图5

格式举例：

  1.     // 利用vue-resource中的jsonp方法实现跨域请求数据，这里要注意的是：
  2.     // url后面不需要跟callback=fn这个参数了，jsonp方法会自动加上
  3.     this.$http.jsonp('http://vuecms.ittun.com/api/getlunbo?id=1')
  4.         .then(function (response) {
  5.             console.log(JSON.stringify(response.body));
  6.         }, function (err) {
  7.             //err是异常数据
  8.         });

请求结果：

09-Vue中的Ajax请求 - 图6

JSONP的实现原理

由于浏览器的安全性限制，默认不允许Ajax发起跨域（协议不同、域名不同、端口号不同）的请求。浏览器认为这种访问不安全。

JSONP的实现原理：通过动态创建script标签的形式，用script标签的src属性，代表api接口的url，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）。

具体实现过程：

  • 先在客户端定义一个回调方法，预定义对数据的操作

  • 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的api接口；

  • 服务器api接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；

  • 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了

axios

除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求。

通过Vue全局配置api接口的url地址

api接口的url地址包括：绝对路径+相对路径。

我们在做Ajax请求的时候，所填写的url建议填相对路径，然后把绝对路径放在全局的位置。

Vue就提供了这个功能。举例如下：

  2.   <script>
  3.     // 如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 /  ，否则 不会启用根路径做拼接；
  4.     Vue.http.options.root = 'http://smyhvae/';
  5.     // 全局启用 emulateJSON 选项
  6.     Vue.http.options.emulateJSON = true;
  8.     var vm = new Vue({
  9.       el: '#app',
  10.       data: {
  11.         name: '',
  12.         list: [ // 存放所有品牌列表的数组
  13.         ]
  14.       },
  15.       created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
  16.         this.getAllList()
  17.       },
  18.       methods: {
  19.         getAllList() { // 获取所有的品牌列表
  20.           // 分析：
  21.           // 1. 由于已经导入了 Vue-resource这个包，所以 ，可以直接通过  this.$http 来发起数据请求
  22.           // 2. 根据接口API文档，知道，获取列表的时候，应该发起一个 get 请求
  23.           // 3. this.$http.get('url').then(function(result){})
  24.           // 4. 当通过 then 指定回调函数之后，在回调函数中，可以拿到数据服务器返回的 result
  25.           // 5. 先判断 result.status 是否等于0，如果等于0，就成功了，可以 把 result.message 赋值给 this.list ; 如果不等于0，可以弹框提醒，获取数据失败！
  27.           this.$http.get('api/getprodlist').then(result => {
  28.             // 注意： 通过 $http 获取到的数据，都在 result.body 中放着
  29.             var result = result.body
  30.             if (result.status === 0) {
  31.               // 成功了
  32.               this.list = result.message
  33.             } else {
  34.               // 失败了
  35.               alert('获取数据失败！')
  36.             }
  37.           })
  38.         }
  39.       }
  40.     });
  41.   </script>

如上方代码所示，第一步是在全局的位置写绝对路径：

  1.     Vue.http.options.root = 'http://smyhvae/';

第二步是在Ajax请求的url中写相对路径：（注意，前面不要带/）

  1. this.$http.get('api/getprodlist')