使用 Vue JS 使用 ajax 和 formspree 提交表单

Question

我正在尝试使用 formspree 提交表单，但出现两个不同的错误。当我在刷新页面后尝试提交表单时，我在新页面上收到错误提示

无法发布/联系

当我返回并尝试再次提交表单时，控制台中出现错误提示：

POST https://formspree.io/sheabathandbody@mail.com400 () jquery.min.js:4

发送@jquery.min.js:4

ajax@jquery.min.js:4

（匿名）@main.js:8

调度@jquery.min.js:3

r.handle@jquery.min.js:3

我之前使用过这个方法/代码来提交我的表单，所以我不知道问题可能是什么

Contact.vue 表单

<form id="contact" name="contact-form" method="post" action = "">
    <fieldset>
      <input placeholder="Your name" name="name" type="text" id="name" tabindex="1" required="required">
     </fieldset>
     <fieldset>
        <input placeholder="Your Email Address" name="email" id="email" type="email" tabindex="2" required="required">
      </fieldset>
      <fieldset>
         <input placeholder="Your Phone Number (optional)" type="tel" tabindex="3">
      </fieldset>
      <fieldset>
        <textarea placeholder="Type your message here...." tabindex="5" name="message" id="message" required="required"></textarea>
       </fieldset>
       <fieldset>
         <button name="submit" type="submit" id="submit_btn" >Submit</button>
       </fieldset>
</form>    

这是我的 main.js

(function($) {
$(window).on("load", function() {
// Contact form
var form = $("#contact");
form.submit(function(event) {
  event.preventDefault();
  var form_status = $('<div class="form_status"></div>');
  $.ajax({
    url: "https://formspree.io/sheabathandbody@mail.com",
    method: "POST",
    data: $(this).serialize(),
    dataType: "json",
    beforeSend: function() {
      form.prepend(
        form_status
          .html(
            '<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>'
          )
          .fadeIn()
      );
    }
  }).done(function(data) {
    form_status
      .html(
        '<p class="text-success">Thank you for contacting us. We will be in touch.</p>'
      )
      .delay(3000)
      .fadeOut();
  });
 });
});
})(jQuery);

Answer 1

您可以创建一个方法，例如 postNow。

  methods: {

   postNow() {
      const link = "https://formspree.io/sheabathandbody@mail.com"
     var data = new FormData();
     data.append('_replyto',this.email)
     data.append('message',this.message)
  
     this.axios.post(link,data , {
      headers: {
        'Accept': 'application/json',
      },
    // body: data,
    }).then(res =>{
       console.log("response ===" ,res)
       this.email = "" ;this.message=""; //don't forget to create your data
    }).catch(err =>{
      console.log(err)
    });
  }
},

在您的模板中，您可以使用简单的 HTML 表单，只需稍加调整即可，

<form  @submit.prevent="postNow" method="POST" >
          <label>
            Your email:
            <input type="email" name="_replyto" v-model="email" />
          </label>
          <label>
            Your message:
            <textarea name="message" v-model="message"></textarea>
          </label>


          <button type="submit">Send</button>
        </form>

Answer 2

猜猜这与 VueJS 无关，因为它在您共享的代码块中根本不使用 vue，这是纯 jQuery。

也就是说，发送表单的问题是因为您没有正确收听提交事件。

form.on('submit', function () { ... })

另一方面，ajax 调用不能正常工作；你应该检查 formspree.io 的文档并更正它。

检查下一个代码

$(document).ready(function() {
  // Contact form
  var form = $("#contact");
  form.on('submit', function(event) {
    alert('Hola hola. This is working now!');
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
      url: "https://formspree.io/sheabathandbody@mail.com",
      method: "POST",
      data: $(this).serialize(),
      dataType: "json",
      beforeSend: function() {
        form.prepend(
          form_status
          .html(
            '<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>'
          )
          .fadeIn()
        );
      }
    }).done(function(data) {
      form_status
        .html(
          '<p class="text-success">Thank you for contacting us. We will be in touch.</p>'
        )
        .delay(3000)
        .fadeOut();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="contact" name="contact-form" method="post" action="">
  <fieldset>
    <input placeholder="Your name" name="name" type="text" id="name" tabindex="1" value="blah" required="required">
  </fieldset>
  <fieldset>
    <input value="email@email.com" placeholder="Your Email Address" name="email" id="email" type="email" tabindex="2" required="required">
  </fieldset>
  <fieldset>
    <input value="123123123" placeholder="Your Phone Number (optional)" type="tel" tabindex="3">
  </fieldset>
  <fieldset>
    <textarea placeholder="Type your message here...." tabindex="5" name="message" id="message" required="required">Damn</textarea>
  </fieldset>
  <fieldset>
    <button name="submit" type="submit" id="submit_btn">Submit</button>
  </fieldset>
</form>