javascript - 使用ajax提交表单

Question

我正在使用 GitHub 页面和 Jekyll 构建一个网站。

我想建立一个联系表单，用户可以在其中发送电子邮件。为此，我使用 Formspree 。我创建了一个帐户并尝试过，它正在工作。 问题是，当发送电子邮件时，我不想将页面重定向到默认的感谢页面。我尝试用ajax提交它，但出了点问题，因此它不起作用! 结果我出现了 404 错误。 URL 也已更改，如下所示:/?name=Name+Lastname&_replyto=test%40hotmail.com&message=Email+content+ 有人可以帮助我吗! 这是我的代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script>
    $("#contact-form").validate({
  submitHandler: function(form) {
    $.ajax({
      url: "//formspree.io/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3f3d2035342e33343b7431283b2934332b331a32352e373b333674393537" rel="noreferrer noopener nofollow">[email protected]</a>", 
      method: "POST",
      data: {
        name: $(form).find("input[name='name']").val(),
        _replyto: $(form).find("input[name='_replyto']").val(),
        message: $(form).find("textarea[name='message']").val()
      },
      dataType: "json",
      success: function() {
        $("#submit-success").fadeIn();
        $("#contact-form").fadeOut();
      },
      error: function() {
        $("#submit-errors").fadeIn();        
      }
    });
  }
});
</script>

这是我的 html 代码:

 <div id="submit-success" class="alert alert-success alert-dismissible collapse" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          Message received! I'll be in touch.
 </div>


<div id="submit-errors" class="alert alert-danger alert-dismissible collapse" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  It looks like there was an error submitting the form. Please try again later.
</div>


<form id="contact-form" class="form" action="/">
  <div class="form-group">
    <label for="name">Name</label>
    <input class="form-control" type="text" name="name" required placeholder="Name">
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input class="form-control" type="email" name="_replyto" required placeholder="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e6eee2eaefc3e2e7e7f1e6f0f0ade0ecee" rel="noreferrer noopener nofollow">[email protected]</a>">
  </div>
  <div class="form-group">
    <label for="message">Message</label>
    <textarea class="form-control" name="message" placeholder="Message" required rows="5"></textarea>
  </div>
  <input class="btn btn-primary" type="submit" value="Send">
</form>

Answer 1

目前，您的表单正在正常提交。停止默认操作

$('#contact-form').on('submit', function(e) {
    e.preventDefault();
});