微信扫一扫打赏支持

VUE课程---25、发ajax请求

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>

 

 

 

 

 

 

 

 
posted @ 2020-04-22 13:58  范仁义  阅读(155)  评论(0)    收藏  举报