vue支不支持ajax

这篇“vue支不支持ajax”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“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支不支持ajax”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。