菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
57
0

ajax怎么在vue中使用?

原创
05/13 14:22
阅读数 1030

ajax怎么在vue中使用?

axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护

本文为大家介绍vue使用axios发送AJAX请求

1、首页安装并引入axios

npm install axios -S        #直接下载axios组件,下载完毕后axios.js就存放在node_modules\axios\dist中

2、发送get请求

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>发送AJAX请求</title>
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#itany',
        data:{
          user:{
            name:'alice',
            age:19
          },
        },
        methods:{
          send(){
            axios({
              method:'get',
              url:'http://www.baidu.com?name=tom&age=23'
            }).then(function(resp){
              console.log(resp.data);
            }).catch(resp => {
              console.log('请求失败:'+resp.status+','+resp.statusText);
            });
          },
          sendGet(){
            axios.get('server.php',{
              params:{
                name:'alice',
                age:19
              }
            })
            .then(resp => {
              console.log(resp.data);
            }).catch(err => {       //
              console.log('请求失败:'+err.status+','+err.statusText);
            });
          },
        }
      });
    }
  </script>
</head>
<body>
  <div id="itany">
    <button @click="send">发送AJAX请求</button>
 
    <button @click="sendGet">GET方式发送AJAX请求</button>
 
  </div>
</body>
</html>

3、发送post请求(push,delete的非get方式的请求都一样)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>发送AJAX请求</title>
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#itany',
        data:{
          user:{
            name:'alice',
            age:19
          },
        },
        methods:{
          sendPost(){
            // axios.post('server.php',{
            //     name:'alice',
            //     age:19
            // }) //该方式发送数据是一个Request Payload的数据格式,一般的数据格式是Form Data格式,所有发送不出去数据
            // axios.post('server.php','name=alice&age=20&') //方式1通过字符串的方式发送数据
            axios.post('server.php',this.user,{ //方式2通过transformRequest方法发送数据,本质还是将数据拼接成字符串
              transformRequest:[
                function(data){
                  let params='';
                  for(let index in data){
                    params+=index+'='+data[index]+'&';
                  }
                  return params;
                }
              ]
            })
            .then(resp => {
              console.log(resp.data);
            }).catch(err => {
              console.log('请求失败:'+err.status+','+err.statusText);
            });
          },
        }
      });
    }
  </script>
</head>
<body>
  <div id="itany">
    <button @click="send">发送AJAX请求</button>
 
    <button @click="sendGet">GET方式发送AJAX请求</button>
 
  </div>
</body>
</html>

使用了Vue后,ajax部分你可以做如下选择:

1.使用JS原生XHR接口

2.引入JQuery或者Zepto 使用$.ajax();

3.Vue的github上提供了vue-resource插件 :

4.使用 fetch.js

5.自己封装一个ajax库

至于哪种方式适合自己的项目大家可以自行选择

发表评论

0/200
57 点赞
0 评论
收藏
为你推荐 换一批