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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

VUE课程---25、发ajax请求" title="ajax请求">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>

 

以上是 VUE课程---25、发ajax请求 的全部内容， 来源链接： utcz.com/z/377380.html

回到顶部