Запустите функцию onreadystatechange с помощью vue - PullRequest
1 голос
/ 21 ноября 2019

Привет, поэтому я использую formspree вместе с ajax для отправки формы через клиентскую часть моей веб-страницы, но у меня возникает ошибка при запуске функции внутри onreadystatechange функция xmlhttprequest, которую я отправляю для отправки данных в formpree. PS: я использовал неверный адрес formpree, поэтому он запускает только функцию ошибки

, вот мой фрагмент:

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...