提交表单而不重新加载页面

Question

我有一个分类网站，在显示广告的页面上，我正在创建一个“向朋友发送小费”表单……

因此，任何想要的人都可以将广告提示发送给一些朋友的电子邮件地址。

我猜表单必须提交到一个php页面对吗？

 <form name="tip" method="post" action="tip.php">
  Tip somebody:
  <input
    name="tip_email"
    type="text"
    size="30"
    onfocus="tip_div(1);"
    onblur="tip_div(2);"
  />
  <input type="submit" value="Skicka Tips" />
  <input type="hidden" name="ad_id" />
</form>

提交表单时，页面会重新加载…我不希望这样…

有没有办法让它不重新加载并仍然发送邮件？最好没有ajax或jquery …

原文由 user188962 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要提交 ajax 请求以发送电子邮件而无需重新加载页面。看看 http://api.jquery.com/jQuery.ajax/

您的代码应该类似于以下内容：

 $('#submit').click(function() {
    $.ajax({
        url: 'send_email.php',
        type: 'POST',
        data: {
            email: '[e-mail]',
            message: 'hello world!'
        },
        success: function(msg) {
            alert('Email Sent');
        }
    });
});

表单将在后台提交到 send_email.php 页面，该页面需要处理请求并发送电子邮件。

原文由 jkilbride 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

没有 XHR 或 jQuery 的现代答案

现在是 2022 年，当我们拥有 Fetch API 和 FormData API 时，我们不需要使用 XHR 或 jQuery 等旧工具！

我们需要做的第一件事是防止发生默认的表单提交行为 event.preventDefault() ：

 form.addEventListener("submit", function(event){
    event.preventDefault();
    // ...
});

现在我们需要用我们自己的 AJAX 请求替换提交行为。 Fetch API 使得发布表单数据变得非常简单——只需创建一个新的 FormData 对象，用表单的值填充它，并将其用作获取请求的主体：

 fetch(form.action, {
    method: "post",
    body: new URLSearchParams(new FormData(form))
});

请注意，这使用 multipart/form-data 格式提交 HTTP 请求。如果您需要使用 application/x-www-form-urlencoded 发布数据，请从 --- 对象创建一个新的 URLSearchParams FormData 对象并将其用作 fetch’s 主体。

 fetch(form.action, {
    method: "post",
    body: new URLSearchParams(new FormData(form))
});

这是一个完整的代码示例：

 let form = document.querySelector("form");

form.addEventListener("submit", function(event){
  event.preventDefault();

  fetch(form.action, {
      method: "post",
      body: //new FormData(form) // for multipart/form-data
      new URLSearchParams(new FormData(form)) //for application/x-www-form-urlencoded
  });
});

 <form method="POST">
  <input name="name" placeholder="Name" />
  <input name="phone" type="tel" placeholder="Phone" />
  <input name="email" type="email" placeholder="Email" />
  <input name="submit" type="submit" />
</form>

原文由 SuperStormer 发布，翻译遵循 CC BY-SA 4.0 许可协议