vueはajaxをサポートしていますか?

Vue 自体は ajax リクエストをサポートしていませんが、「vue-resource」、axios、およびその他のプラグインを使用して vue を実装し、ajax リクエストを送信できます。axios は、送信に使用される Promise ベースの HTTP リクエスト クライアントです。 「vue-resource」は、XMLHttpRequest または JSONP を使用して Web リクエストを作成し、応答を処理するためのサービスを提供するプラグインです。

このチュートリアルの動作環境: Windows 10 システム、Vue3 バージョン、Dell G3 コンピューター。

vue は ajax をサポートしていますか?

Vue 自体は AJAX リクエストの送信をサポートしていません。vue-resource (vue1.0 バージョン)、axios (vue2.0 バージョン) を使用する必要があります。および実装するその他のプラグイン

axios は、リクエストの送信に使用される Promise ベースの HTTP リクエスト クライアントであり、vue2.0 によって公式に推奨されています。更新および保守は行われなくなりました

vue -resource は、XMLHttpRequest または JSONP を使用して Web リクエストを作成し、応答を処理するためのサービスを提供する Vue.js のプラグインです。

vue が 2.0 に更新されると、作者は vue-resource を更新しないことを発表しましたが、axios を推奨します。ここでは vue-resource について学ぶことができます。

vue は axios を使用して AJAX リクエストを送信します:

ホームページで axios をインストールして導入します

npm install axios -S

または axios.min.js ファイルを直接ダウンロードしますスクリプト src を通じてオンライン ファイルの紹介

<script></script>

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

#*get request

1. 基本的な使用形式

形式 1: axios([options]) #Thisこの形式は、すべてのデータを options に直接書き込みます

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

2. パラメータの受け渡し方法:

URL パラメータを渡す

params オプションを介してパラメータを渡す

コード スニペット:

<p>
    <input>
</p>
<p>
    <input>
</p>
<a>注册账号</a>
<p>
    <button>立即登录</button>
</p>

<script>
  export default {
    data:function(){
      return{
        none: false,
        loginForm: {
          loginName: &#39;&#39;,
          passWord: &#39;&#39;
        }
      }
    },
    methods: {
      gotoRegister:function(){
        this.$router.push({
          name:&#39;register&#39;
        });
      },
      doLogin(){
//接口  this.$axios.get(接口地址).then(function(respon){}).catch(function(error){})
        let _this = this;
        if (this.loginForm.loginName === &#39;&#39; || this.loginForm.passWord === &#39;&#39;) {
          alert(&#39;账号或密码不能为空&#39;);
        } else {
          this.$axios.get("/WebUserLogin",{
            params:_this.loginForm
          }).then(res=>{
            var result = JSON.parse(res.data);
            // console.log(result);
            if (result.state == &#39;ok&#39;) {
               // console.log(&#39;登陆成功&#39;);
               window.sessionStorage.setItem(&#39;token&#39;, result.token) //存入token
               _this.$router.push(&#39;/index&#39;);
            }else{
              alert(&#39;登录失败请检查用户名和密码是否正确&#39;);
            }
          }).catch(error => {
            alert(&#39;账号或密码错误&#39;);
            // console.log(error);
          });

        }

      }
    }
  }
</script>

*post リクエスト (プッシュと削除の非取得リクエストは同じです)

形式: axios.post(url,data,[options]) または axios([options])

<script>
  import qs from &#39;qs&#39;
  export default {
    data:function(){
      return{
        none: false,
        registerForm: {
          LoginName: &#39;&#39;,
          LoginPassword: &#39;&#39;
        }
      }
    },
    methods: {
        register(){
          let _this = this;
          if (this.registerForm.LoginName === &#39;&#39; || this.registerForm.LoginPassword === &#39;&#39;) {
            alert(&#39;注册信息不能空&#39;);
          } 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 == &#39;ok&#39;) {
                 alert(&#39;注册成功去登录&#39;);
                 _this.$router.push(&#39;/&#39;);
              }else{
                alert(&#39;注册失败请检查注册信息是否正确&#39;);
              }
            }).catch(error => {
              alert(&#39;注册信息有误&#39;);
              // 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をサポートしていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。