Adakah vue menyokong ajax?-Soal Jawab bahagian hadapan-php.cn

Adakah vue menyokong ajax?

WBOY

Lepaskan： 2022-07-01 16:47:05

asal

3120 orang telah melayarinya

Vue sendiri tidak menyokong permintaan ajax, tetapi anda boleh menggunakan "vue-resource", axios dan pemalam lain untuk melaksanakan vue untuk menghantar permintaan ajax ialah klien permintaan HTTP berasaskan Janji yang digunakan untuk menghantar permintaan, " vue-resource" ialah pemalam yang menyediakan perkhidmatan untuk membuat permintaan web dan memproses respons menggunakan XMLHttpRequest atau JSONP.

Adakah vue menyokong ajax?

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi Vue3, komputer Dell G3.

Adakah vue menyokong ajax?

Vue sendiri tidak menyokong penghantaran permintaan AJAX Anda perlu menggunakan vue-resource (versi vue1.0), axios (versi vue2.0). dan pemalam lain untuk mencapai

axios ialah klien permintaan HTTP berasaskan Promise, digunakan untuk menghantar permintaan, dan juga disyorkan secara rasmi oleh vue2.0 Pada masa yang sama, vue-resource akan tidak lagi dikemas kini dan diselenggara

vue -resource ialah pemalam untuk Vue.js yang menyediakan perkhidmatan untuk membuat permintaan web dan memproses respons menggunakan XMLHttpRequest atau JSONP.

Apabila vue dikemas kini kepada 2.0, pengarang mengumumkan bahawa dia tidak lagi akan mengemas kini vue-resource, tetapi mengesyorkan axios Di sini anda boleh belajar tentang vue-resource.

vue menggunakan axios untuk menghantar permintaan AJAX:

Pasang dan perkenalkan axios pada halaman utama

npm install axios -S

Salin selepas log masuk

atau muat turun terus axios.min. js fail dalam talian melalui Perkenalkan fail melalui skrip src

<script src="js/axios.min.js"></script>

Salin selepas log masuk

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
Vue.prototype.$axios = axios;

Salin selepas log masuk

*dapatkan permintaan

Format penggunaan asas

Format 1: axios ([options]) #Format ini menulis semua data terus dalam pilihan

Format 2: axios.get(url[,options])

Kaedah lulus parameter:

Pas parameter melalui url

Pas parameter melalui pilihan params

Coretan kod:

<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>

Salin selepas log masuk

<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>

Salin selepas log masuk

*permintaan pos (tidak mendapat tolak, padam) Kaedah permintaan adalah sama)

Format: axios.post(url,data,[options]) atau 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>

Salin selepas log masuk

index.js global guard

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)
  })

Salin selepas log masuk

[Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Adakah vue menyokong ajax?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!