使用 vue 触发函数 onreadystatechange答案

【问题标题】：Fire a function onreadystatechange with vue使用 vue 触发函数 onreadystatechange
【发布时间】：2020-03-17 07:00:47
【问题描述】：

您好，我正在使用 formspree 和 ajax 通过网页的客户端提交表单，但在 onreadystatechange 函数用于将数据提交到formspree。 PS：我使用了 invalid formspree 地址，所以它只会触发错误函数

这是我的sn-p：

new Vue({
el: '#app',
data: {
  msg: "",
  name: null,
  pass: null
},
methods: {
 error(error){
            this.msg = "error:"+error
          },
 success(){
            this.msg = "success"
          },

        send(){
                let form = $('#contact-form')[0]
                var data = new FormData(form);
                this.ajax(form.method, form.action, data, this.success(), this.error());
                
                if(this.ajax){
                    this.name = this.pass = null
                }
                else
                {
                  //other
                }
        },

        ajax(method, url, data, success, error) {
            var xhr = new XMLHttpRequest();
            xhr.open(method, url);
            xhr.setRequestHeader("Accept", "application/json");
            xhr.onreadystatechange = function() {
              if (xhr.readyState !== XMLHttpRequest.DONE) return;
              if (xhr.status === 200) {
                success(xhr.response, xhr.responseType);//is not a fucntion
              } else {
                error(xhr.status, xhr.response, xhr.responseType);//is not a fucntion here
              }
            };
            xhr.send(data);
          },
}
})

input{display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
 <form id="contact-form" method="POST"   action="https://formspree.io/mfaeqny" @submit.prevent="send">
  <input type="text" v-model="name" name="name" placeholder="name">
  <input type="password" v-model="pass" name="pass" placeholder="pass">
  <button type="submit">submit</button>
  <p>{{ msg }}</p>
 </form>
</div>

【问题讨论】：

标签： jquery html ajax vue.js

【解决方案1】：

解决方法：去掉函数this.ajax(form.method, form.action, data, this.success, this.error);后面的括号

new Vue({
el: '#app',
data: {
  msg: "",
  name: null,
  pass: null
},
methods: {
 error(error){
            this.msg = "error:"+error
          },
 success(){
            this.msg = "success"
          },

        send(){
                let form = $('#contact-form')[0]
                var data = new FormData(form);
                this.ajax(form.method, form.action, data, this.success, this.error);
                
                if(this.ajax){
                    this.name = this.pass = null
                }
                else
                {
                  //other
                }
        },

        ajax(method, url, data, success, error) {
            var xhr = new XMLHttpRequest();
            xhr.open(method, url);
            xhr.setRequestHeader("Accept", "application/json");
            xhr.onreadystatechange = function() {
              if (xhr.readyState !== XMLHttpRequest.DONE) return;
              if (xhr.status === 200) {
                success(xhr.response, xhr.responseType);//is not a fucntion
              } else {
                error(xhr.status, xhr.response, xhr.responseType);//is not a fucntion here
              }
            };
            xhr.send(data);
          },
}
})

input{display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
 <form id="contact-form" method="POST"   action="https://formspree.io/mfaeqny" @submit.prevent="send">
  <input type="text" v-model="name" name="name" placeholder="name">
  <input type="password" v-model="pass" name="pass" placeholder="pass">
  <button type="submit">submit</button>
  <p>{{ msg }}</p>
 </form>
</div>

【讨论】：