Vue--axios：vue中的ajax異步請求（發送和請求數據）、vue-resource異步請求和跨域

時間  2019-11-09
標籤 vue axios ajax 異步 請求 發送 數據 resource 求和 欄目 Ajax 简体版
原文   原文鏈接

跨域原理:

 

一.使用axios發送get請求

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <title>Document</title>   
 8 <script src="../vue2.4.4.js"></script>
 9 <script src="../axios.js"></script>
10 
11 </head>
12 
13 <body>
14 <!-- 定義一個vue的管理區塊，（MVVM中的View） -->
15 <div id="app">
16     <button @click="getApiData">點擊獲得數據</button>
17     {{name}}
18 </div>
19 
20 </body>
21 
22 <script>
23 
24     // 實例化vue對象（MVVM中的View Model）
25     new Vue({
26         // vm控制的區塊爲id爲app的div，此div中的全部vue指令都可以被vm解析
27         el:'#app',
28         data:{
29         // 數據 （MVVM中的Model）   
30         name:""
31         },
32         methods:{
33 getApiData:function() { 34 //設置請求路徑 35 var url = "http://157.122.54.189:9093/api/getprodlist"; 36 // 發送請求:將數據返回到一個回到函數中 37 _this= this; 38 // 而且響應成功之後會執行then方法中的回調函數 39 axios.get(url).then(function(result) { 40 // result是全部的返回回來的數據 41 // 包括了響應報文行 42 // 響應報文頭 43 // 響應報文體 44 console.log(result.data.message[0]); 45 _this.name = result.data.message[0].name; 46  }); 47  } 48         }
49     })
50 </script>
51 </html>

二.使用axios發送post請求

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <title>Document</title>   
 8 <script src="../vue2.4.4.js"></script>
 9 <script src="../axios.js"></script>
10 
11 </head>
12 
13 <body>
14 <!-- 定義一個vue的管理區塊，（MVVM中的View） -->
15 <div id="app">
16     <button @click="postApiData">點擊提交數據</button>
17 </div>
18 
19 </body>
20 
21 <script>
22 
23     // 實例化vue對象（MVVM中的View Model）
24     new Vue({
25         // vm控制的區塊爲id爲app的div，此div中的全部vue指令都可以被vm解析
26         el:'#app',
27         data:{
28         // 數據 （MVVM中的Model）   
29         },
30         methods:{
31 postApiData:function() { 32 var url = "http://157.122.54.189:9093/api/addproduct"; 33 // post有兩個參數 34 //參數1:請求的路徑 35 //參數2:提交的參數 36 //提交參數的兩種形態: 37 // 1.能夠直接傳入字符串 name=張三&age=19 38 // 2.能夠以對象的形式傳入{name:"三",age:19} 39 axios.post(url,{name:"拖油瓶前來報道"}).then(function(res) { 40 var resData = res.data; 41 if(resData.status == "0") { //0表示成功，1表示失敗  42  alert(resData.message); 43 }else{ 44  alert(resData.message); 45  } 46  }); 47 48  } 49         }
50     })
51 </script>
52 </html>

三.使用axios發送post或get請求細節處理

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <title>Document</title>   
 8 <script src="../vue2.4.4.js"></script>
 9 <script src="../axios.js"></script>
10 
11 </head>
12 
13 <body>
14 <!-- 定義一個vue的管理區塊，（MVVM中的View） -->
15 <div id="app">
16      <button @click="getApiData">點擊獲得數據</button>
17      <button @click="postApiData">點擊提交數據</button>
18     {{name}}
19   
20 </div>
21 
22 </body>
23 
24 <script>
25 //細節處理一：能夠給axios的ajax請求設置統一的主機和端口號 26 axios.defaults.baseURL = "http://157.122.54.189:9093/"; 27 //細節處理二: 能夠將axios這個對象添加到Vue的原型對象中，未來在使用的時候就只須要使用this.對象名就能夠了 28 Vue.prototype.$http = axios; 29 
30 
31     // 實例化vue對象（MVVM中的View Model）
32     new Vue({
33         // vm控制的區塊爲id爲app的div，此div中的全部vue指令都可以被vm解析
34         el:'#app',
35         data:{
36         // 數據 （MVVM中的Model） 
37         name:"" 
38         },
39         methods:{ 
40             getApiData:function() {
41             //設置請求路徑
42             var url  = "api/getprodlist";                
43             // 發送請求:將數據返回到一個回到函數中
44             _this= this;
45             // 而且響應成功之後會執行then方法中的回調函數
46             this.$http.get(url).then(function(result) {
47                 // result是全部的返回回來的數據
48                 // 包括了響應報文行
49                 // 響應報文頭
50                 // 響應報文體
51                 _this.name = result.data.message[0].name;
52             }).catch(function(){
53                 alert("出錯了");
54             });    
55             },
56 
57             postApiData:function() {
58                 var url = "api/addproduct";
59                 // post有兩個參數
60                 //參數1:請求的路徑
61                 //參數2:提交的參數
62                 //提交參數的兩種形態:
63                 //          1.能夠直接傳入字符串 name=張三&age=19
64                 //          2.能夠以對象的形式傳入{name:"三",age:19}
65                 this.$http.post(url,{name:"拖油瓶前來報道3 "}).then(function(res) {
66                    var resData = res.data;
67                    if(resData.status == "0") { //0表示成功，1表示失敗    
68                         alert(resData.message);
69                    }else{
70                         alert(resData.message);
71                    }
72                 }).catch(function(){
73                      alert("出錯了");
74                 }); ;
75 
76             }
77         }
78     })
79 </script>
80 </html>

四.使用axios完成品牌管理

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9     <style>
 10         #app {
 11             width: 600px;
 12             margin: 10px auto;
 13         }
 14 
 15         .tb {
 16             border-collapse: collapse;
 17             width: 100%;
 18         }
 19 
 20         .tb th {
 21             background-color: #0094ff;
 22             color: white;
 23         }
 24 
 25         .tb td,
 26         .tb th {
 27             padding: 5px;
 28             border: 1px solid black;
 29             text-align: center;
 30         }
 31 
 32         .add {
 33             padding: 5px;
 34             border: 1px solid black;
 35             margin-bottom: 10px;
 36         }
 37     </style>
 38     <script src="../vue2.4.4.js"></script>
 39     <script src="../axios.js"></script>
 40 </head>
 41 
 42 <body>
 43     <div id="app">
 44         <div class="add">
 45             品牌名稱: <input v-model="name" type="text">
 46             <button @click="add">添加</button>
 47         </div>
 48         <div class="add">品牌名稱：<input type="text"></div>
 49         <div>
 50             <table class="tb">
 51                 <tr>
 52                     <th>編號</th>
 53                     <th>品牌名稱</th>
 54                     <th>創立時間</th>
 55                     <th>操做</th>
 56                 </tr>
 57                 <tr v-if="list.length <= 0">
 58                     <td colspan="4">沒有品牌數據</td>
 59                 </tr>
 60                 <!--加入: key="index" 時候必須把全部參數寫完整  -->
 61                 <tr v-for="(item,key,index) in list" :key="index">
 62                     <td>{{item.id}}</td>
 63                     <td>{{item.name}}</td>
 64                     <td>{{item.ctime}}</td>
 65                     <td><a href="#" @click="del(item.id)">刪除</a></td>
 66                 </tr>
 67             </table>
 68         </div>
 69 
 70     </div>
 71 </body>
 72 
 73 </html>
 74 
 75 <script>
 76 // 1 將全部的主機名和端口 一塊兒設置  77 axios.defaults.baseURL = "http://157.122.54.189:9093";  78 // 2 將axios添加到Vue的原型對象中  79 Vue.prototype.$http = axios;  80 
 81     var vm = new Vue({
 82         el: "#app",
 83         data: {
 84             name: '',
 85             list: []  // 數據應該來源於服務器提供的api
 86         },
 87         mounted:function() { //鉤子函數
 88             this.getList();
 89         },
 90         methods: {
 91             // 獲得全部的列表數據,這個方法應該等頁面加載完成之後直接被調用的
 92             getList:function() {  93                 var url = "/api/getprodlist";  94                 // 改變this的指向
 95                 _this = this;  96                 this.$http.get(url).then(function(result){  97                     var res = result.data;  98                     if(res.status ==  0) {  99                         //將數據賦值給list
100                         _this.list = res.message; 101                     }else{ 102                         alert("出錯了"); 103  } 104                 }).catch(function(){ 105                     alert("出錯了"); 106  }); 107  }, 108             // 獲得文本框中的值，而且將值經過api提交到服務器
109             add:function() { 110                 var url = "/api/addproduct"; 111                 _this = this; 112                 // 獲得name屬性對應的值
113                 this.$http.post(url,{"name":this.name}).then(function(result){ 114                     var res = result.data; 115                     if(res.status == "0") { 116  alert(res.message); 117  _this.getList(); 118                     }else{ 119  alert(res.message); 120  } 121                 }).catch(function() { 122                     alert("出錯了"); 123  }); 124  }, 125             del:function(id){ 126                 //格局id刪除數據
127                 var url =   "/api/delproduct/"+id; 128                 // 發送異步請求
129                 _this = this; 130                 this.$http.get(url).then(function(result){ 131                     var res = result.data; 132                     if(res.status == "0") { 133  alert(res.message); 134                         //更新數據
135  _this.getList(); 136                     }else{ 137  alert(res.message); 138  } 139                     
140                 }).catch(function(){ 141                     alert("出錯了"); 142  }); 143  } 144         }
145     });
146 
147 </script>

 五.使用vue-resource發送異步請求(包含get和post請求)

兩個js文件必定要按照順序加載html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <title>Document</title>   
 8 <script src="../vue2.4.4.js"></script>
 9 <script src="../vue-resource.js"></script>
10 
11 </head>
12 
13 <body>
14 <!-- 定義一個vue的管理區塊，（MVVM中的View） -->
15 <div id="app">
16     {{name}}
17 </div>
18 
19 </body>
20 
21 <script>
22 
23     // 實例化vue對象（MVVM中的View Model）
24     new Vue({
25         // vm控制的區塊爲id爲app的div，此div中的全部vue指令都可以被vm解析
26         el:'#app',
27         data:{
28         // 數據 （MVVM中的Model）  
29         name:"" 
30         },
31         methods:{
32             
33         },
34         created:function() {
35             // 發送請求到服務器加載數據
36             //vue-resource發送get請求
37            /* this.$http.get("http://157.122.54.189:9093/api/getprodlist").then(function(result){
38                //獲得響應的內容
39                var res = result.body;
40                this.name = res.message[0].name;
41             });
42             */
43             //vue-resource發送post請求
44             this.$http.post("http://157.122.54.189:9093/api/addproduct",{"name":"小明"}).then(function(result){
45                var res = result.body;
46                alert(res.message);
47             });
48         }
49     })
50 </script>
51 </html>

 

六.使用vue-resource來實現跨域

　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <title>Document</title>   
 8 
 9 <script src="../vue2.4.4.js"></script>
10 <script src="../vue-resource.js"></script>
11 </head>
12 
13 <body>
14 <!-- 定義一個vue的管理區塊，（MVVM中的View） -->
15 <div id="app">
16 
17 </div>
18 
19 </body>
20 
21 <script>
22 
23     // 實例化vue對象（MVVM中的View Model）
24     new Vue({
25         // vm控制的區塊爲id爲app的div，此div中的全部vue指令都可以被vm解析
26         el:'#app',
27         data:{
28         // 數據 （MVVM中的Model）   
29         },
30         mounted:function() {
31             var url = "http://157.122.54.189:9093/jsonp";
32             //在vue-resources中會自動在路徑上加入callback的函數名，獲得的結果就是result
33             this.$http.jsonp(url).then(function(result){ 34                 var res = JSON.parse(JSON.parse(result.body)); 35  console.log(res.message); 36  }); 37         }
38     })
39 </script>
40 </html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程