Question

嗨，所以我正在使用 formspree 和 ajax 通过我的网页的客户端提交表单，但是在<我正在发送的xmlhttprequest的strong> onreadystatechange 功能，以将数据提交给FormsPree。 PS：我使用了无效的Formspree地址，因此它仅会触发错误功能

这是我的摘录：

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>

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

用Vue触发功能onreadystatechange

1 个答案: