您好,欢迎访问一九零五行业门户网

vue支持ajax吗

vue本身是不支持ajax请求的,但是可以利用“vue-resource”、axios等插件实现vue发送ajax请求;axios是一个基于promise的http请求客户端,用于发送请求,“vue-resource”是一个插件用于提供使用xmlhttprequest或jsonp进行web请求和处理响应的服务。
本教程操作环境:windows10系统、vue3版、dell g3电脑。
vue支持ajax吗vue本身不支持发送ajax请求,需要使用vue-resource(vue1.0版本)、axios(vue2.0版本)等插件实现
axios是一个基于promise的http请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护
vue-resource是vue.js的插件提供了使用xmlhttprequest或jsonp进行web请求和处理响应的服务。 
当vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,在这里大家了解一下vue-resource就可以。
vue使用axios发送ajax请求:
首页安装并引入axios
npm install axios -s
或者网上直接下载axios.min.js文件通过script src的方式进行文件的引入
<script src="js/axios.min.js"></script>
import axios from 'axios'import vueaxios from 'vue-axios'vue.use(vueaxios,axios);vue.prototype.$axios = axios;
*get请求1、基本使用格式
格式1:axios([options]) #这种格式直接将所有数据写在options里
格式2:axios.get(url[,options])
2、传参方式:
通过url传参
通过params选项传参
代码片段:
<p class="lgd">    <input type="text" placeholder="输入用户名" v-model="loginform.loginname"/></p><p class="lgd">    <input type="password" placeholder="输入用户密码" v-model="loginform.password"/></p><a class="register" @click="gotoregister()">注册账号</a><p class="logc">    <button @click="dologin" type="button">立即登录</button></p>
<script>  export default {    data:function(){      return{        none: false,        loginform: {          loginname: '',          password: ''        }      }    },    methods: {      gotoregister:function(){        this.$router.push({          name:'register'        });      },      dologin(){//接口  this.$axios.get(接口地址).then(function(respon){}).catch(function(error){})        let _this = this;        if (this.loginform.loginname === '' || this.loginform.password === '') {          alert('账号或密码不能为空');        } else {          this.$axios.get(/webuserlogin,{            params:_this.loginform          }).then(res=>{            var result = json.parse(res.data);            // console.log(result);            if (result.state == 'ok') {               // console.log('登陆成功');               window.sessionstorage.setitem('token', result.token) //存入token               _this.$router.push('/index');            }else{              alert('登录失败请检查用户名和密码是否正确');            }          }).catch(error => {            alert('账号或密码错误');            // console.log(error);          });        }      }    }  }</script>
*post请求 (push,delete的非get方式的请求都一样)格式:axios.post(url,data,[options]) 或者 axios([options])
<script>  import qs from 'qs'  export default {    data:function(){      return{        none: false,        registerform: {          loginname: '',          loginpassword: ''        }      }    },    methods: {        register(){          let _this = this;          if (this.registerform.loginname === '' || this.registerform.loginpassword === '') {            alert('注册信息不能空');          } else {            this.$axios({               url:/webuserregist,              method:post,              data:qs.stringify(_this.registerform)            }).then(res=>{              var result = json.parse(res.data);              // console.log(result);              if (result.state == 'ok') {                 alert('注册成功去登录');                 _this.$router.push('/');              }else{                alert('注册失败请检查注册信息是否正确');              }            }).catch(error => {              alert('注册信息有误');              // console.log(error);            });          }        }    }  }</script>
index.js全局守卫
router.beforeeach((to,form,next) =>{      //如果进入到的路由是登录页或者注册页面,则正常展示      if (to.path === '/login') {          next();        } else {          let token = window.sessionstorage.getitem('token');          // console.log(token)          if (token === null || token === '') {            next('/login');            // alert(还没有登录,请先登录!);          } else {            next();          }        }      // console.log(to)  })
【相关推荐:《vue.js教程》】
以上就是vue支持ajax吗的详细内容。
其它类似信息

推荐信息