提交不带重定向的 HTML 表单并显示成功消息

Question

我决定从 WordPress 网站切换到使用 HTML、CSS 和 JS 自制的网站，旨在提高性能。到目前为止，依靠教程，我已经设法处理了几乎所有问题，但是我无法让联系表格像在 WP 中那样工作。到目前为止，它会将我重定向到显示成功消息的另一个页面，这很难看。

基本上，我希望提交按钮做 3 件事： 1. 不要将我重定向到另一个页面。 2. 重置表格。 3. 显示成功消息。

在这里阅读了许多类似的问题，但由于我对 AJAX 完全不熟悉，最终决定发布这个问题。这是我的代码：

索引.html：

     <div>
        <form method="post" action="form.php" name="myForm">
          <input name="name" placeholder="Nombre" required>
          <input name="email" type="email" placeholder="Correo Electrónico" required>
          <textarea rows="10" name="message" placeholder="Mensaje" required></textarea>
          <input id="submit" name="submit" type="submit" value="Enviar Mensaje" class="boton-rojo">
        </form>
      </div>

在form.php中：

<?php

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="De: $name \n Mensaje: $message";
$recipient = "contacto@mydomainname.cl";
$subject = "Mensaje desde el sitio web";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Tu consulta fue recibida";

?>

任何帮助将不胜感激。

谢谢。

Answer 1

在表单中输入 ID

<form id='myForm'>
....
</form>

使用 jQuery（为了简单的代码）

   ....
   <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>
</body>

使用 $.ajax

$('#myForm').submit(function(e) {

   e.preventDefault(); // prevent from submitting form directly

   $.ajax({
     url: 'form.php',
     method: 'post',
     data: $("#myForm").serializeArray() // convert all form data to array (key:value)
   })
   .done(function(response){
     alert(response); // show the response
     $("#myForm").reset(); // reset the form
   })
   .fail(function(error){
     alert(error); // show the error.
   });

})