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”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。