Javascript 使用ajax提交表单

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

我想建立一个用户可以发送电子邮件的联系表单。为此，我使用了

Formspree

。我创建了一个帐户，我试过了，它正在运行。 问题是，当发送电子邮件时，我不想将页面重定向到默认的感谢页面。我试着用ajax提交它，但有些地方出了问题，因此它不起作用！！ 结果我有一个404错误。URL也发生了更改，看起来是这样的：

/？name=name+Lastname&\u 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/egzontina.krasniqi@hotmail.com", 
      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>

$（“#联系方式”）。验证({
submitHandler:函数（表单）{
$.ajax({
url://formspree.io/egzontina。krasniqi@hotmail.com", 
方法：“张贴”，
数据：{
名称：$（表单）.find（“输入[name='name']”）.val（），
_replyto:$（表单）.find（“输入[名称=”\u replyto']）.val（），
消息：$（表单）.find（“textarea[name='message']”）.val（）
},
数据类型：“json”，
成功：函数（）{
$（“#提交成功”）.fadeIn（）；
$（“#联系方式”）.fadeOut（）；
},
错误：函数（）{
$（“#提交错误”）.fadeIn（）；
}
});
}
});

以下是我的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="email@address.com">
  </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>

&时代；
收到消息！我会和你联系的。
&时代；
似乎提交表单时出错。请稍后再试。
名称
电子邮件
消息

从表单中删除

操作=“/”

，留下：

<form id="contact-form" class="form">

试试看，告诉我会发生什么

Yh并将提交输入更改为按钮

<button type="button" class="btn btn-primary">Send</button>

发送

@亚亚洲的贡献也是正确的。请投票给我们的答案。

---

让我们知道，如果您觉得它有帮助

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

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

---

从你的表单中移除动作，那么它肯定会起作用。 否则，不管您在客户端执行任何其他验证，都将“/”作为GET请求调用

@德科伊是绝对正确的。 使用此代码：

---

开发人员工具中的控制台会说什么？“它不工作”-这不是一个好的问题陈述。会发生什么？您已经获得了成功和错误函数。他们中有人开枪吗？@Quentin我有一个404错误。URL已更改，看起来是这样的：/？name=name+Lastname&_replyto=test%40hotmail.com&message=My+email+content+，这是因为您正在提交表单（操作错误），而您的JS没有阻止它。验证函数是否应该停止提交？@Quentin如果我将操作更改为：action=“//formspree.io”/your@email.com“Js代码也不起作用，页面重定向到Formspree感谢页面！你能帮点忙吗！我通过这个链接做到了：谢谢你的回答！我改变了，但是现在页面正在重新加载，只有URL在更改，电子邮件没有发送！URL看起来是一样的：/？name=name+Lastname&_replyto=test%40hotmail.com&message=Email+content+我尝试了这个方法，但同样的事情发生了，URL被更改，结果我出现了404错误！谢谢你的回答！我改变了，但是现在页面正在重新加载，只有URL在更改，电子邮件没有发送！URL看起来相同：/？name=name+Lastname&_replyto=test%40hotmail.com&message=Email+content+，然后将输入类型从提交更改为按钮。i、 e.

至