VUE课程---25、发ajax请求
一、总结
一句话总结：
vue发ajax包可以用axios包，操作也是比较简单，直接照着文档操作即可
methods:{ getNews:function () { _vue=this; //console.log(_vue); axios.post('http://api.com/api/news_post', { name: 'aaa' }) .then(function (response) { _vue.news=response.data.news; console.log(response); }) .catch(function (error) { alert('获取数据失败'); console.log(error); }) .then(function () { // always executed console.log('always executed'); }); } }
二、发ajax请求
博客对应课程的视频位置：
1、axios发get请求
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>axios发get请求</title> 6 </head> 7 <body> 8 <!-- 9 10 11 --> 12 <div id="app"> 13 <div v-for="(item,index) in news" :key="index" style="margin-bottom: 30px;"> 14 <h3>{{item.title}}</h3> 15 <div>{{item.content}}</div> 16 </div> 17 </div> 18 <script src="../js/vue.js"></script> 19 <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script> 20 <script> 21 let vm = new Vue({ 22 el: '#app', 23 data: { 24 news:[] 25 }, 26 mounted:function(){ 27 this.getNews(); 28 }, 29 methods:{ 30 getNews:function () { 31 _vue=this; 32 //console.log(_vue); 33 axios.get('http://api.com/api/news') 34 .then(function (response) { 35 // handle success 36 _vue.news=response.data.news; 37 console.log(response); 38 }) 39 .catch(function (error) { 40 alert('获取数据失败'); 41 // handle error 42 console.log(error); 43 }) 44 .then(function () { 45 // always executed 46 console.log('always executed'); 47 }); 48 } 49 } 50 }); 51 </script> 52 </body> 53 </html>
2、axios发post请求
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>axios发post请求</title> 6 </head> 7 <body> 8 <!-- 9 10 --> 11 <div id="app"> 12 <div v-for="(item,index) in news" :key="index" style="margin-bottom: 30px;"> 13 <h3>{{item.title}}</h3> 14 <div>{{item.content}}</div> 15 </div> 16 <button @click="getNews">获取ajax数据</button> 17 </div> 18 <script src="../js/vue.js"></script> 19 <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script> 20 <script> 21 let vm = new Vue({ 22 el: '#app', 23 data: { 24 news:[] 25 }, 26 methods:{ 27 getNews:function () { 28 _vue=this; 29 //console.log(_vue); 30 axios.post('http://api.com/api/news_post', { 31 name: 'aaa' 32 }) 33 .then(function (response) { 34 _vue.news=response.data.news; 35 console.log(response); 36 }) 37 .catch(function (error) { 38 alert('获取数据失败'); 39 console.log(error); 40 }) 41 .then(function () { 42 // always executed 43 console.log('always executed'); 44 }); 45 } 46 } 47 }); 48 </script> 49 </body> 50 </html>