使用jqueryajax显示成功发送的电子邮件

我已经编写了一个联系人表单和php脚本，用于发送电子邮件find，但当发送消息时，它会重新加载一个新页面

我想使用Ajax在发送消息时向用户显示消息，而不是转到新页面

有什么方法可以用Jquery轻松做到这一点

我的表格：

      <form id="cont-form" method="post" action="mail.php">
  <fieldset>
    <legend>Send me a message</legend>
    <ol>
      <li>
        <label for="name">Name</label>
        <input id="name" name="name" type="text" placeholder="First and last name" required>
      </li>
      <li>
        <label for="email">Email</label>
        <input id="email" name="email" type="email" placeholder="example@domain.com" required>
      </li>
      <li>
        <label for="phone">Phone</label>
        <input id="phone" name="phone" type="tel" placeholder="Eg. 07500000000" required>
      </li>
      <li>
        <label for="subject">Subject</label>
        <input id="subject" name="subject" type="text" placeholder="Eg. Enquiry" required>
      </li>
      <li>
        <label for="message">Message</label>
        <textarea id="message" name="message" placeholder="Insert your message or question" rows="10" cols="50"></textarea>
      </li>
      <li>
        <label for="human">Enter the number 4 if you're human</label>
        <input id="human" name="human" type="text" placeholder="Are you human?" required>
      </li>
    </ol>
  </fieldset>
  <fieldset>
    <input class="button" id="submit" name="submit" type="submit" value="Send it!">
  </fieldset>
</form>

给我留言

名称


电子邮件


电话


主题


消息


如果你是人类，请输入数字4

我的php脚本：

    <?php
    $name = $_POST['name']; //'name' has to be the same as the name value on the form input element
   $email = $_POST['email'];
   $message = $_POST['message'];
   $human = $_POST['human'];
   $from = $_POST['email'];
   $to = 'ben_humphries@hotmail.co.uk'; //set to the default email address
   $subject = $_POST['subject'];
   $body = "From: $name\n E-Mail: $email\n Message:\n $message";

   $headers = "From: $email" . "\r\n" .
   "Reply-To: $email" . "\r\n" .
   "X-Mailer: PHP/" . phpversion();

   if(isset($_POST['submit']) && ($_POST['human']) == '4') {               
   mail ($to, $subject, $body, $headers);  //mail sends it to the SMTP server side which    sends the email
   echo "<p>Your message has been sent!</p>";
   } 

   else { 
   echo "<p>Something went wrong, go back and try again!</p>"; 
   } 
   if (!isset($_POST['submit']) && ($_POST['human']) != '4') {
   echo "<p>You answered the anti-spam question incorrectly!</p>";
   }
   ?>

---

是的。您需要做几件事：

1-更改submit按钮，使其调用执行AJAX调用的JQuery/Javascript函数：

<button class="button" id="submit" name="submit">Send it!</button>

---

2-更改

mail.php

以回显您想要的消息

alert（）

。在你的情况下，它可能已经起作用了。如果您正在返回HTML代码，那么最好将其显示在

div

中，而不是执行

alert（）

创建一个

$。一旦发送了电子邮件，就为上面的PHP文件调用ajax

，

echo

返回您想要显示的内容。我已经像您所说的那样添加了jquery，页面仍在另一个页面中加载，并且没有警告，表单操作的开始是否需要更改，因为它直接链接到php文件。您还必须更改提交输入的HTML！是的，因此当id为“submit”的按钮被单击时，jquery被调用，按钮id已经是submit，表单action=“mail.php”是否需要更改？这里的问题是您正在使用带有

提交
类型的
输入
标记。单击此按钮将提交表单并加载新页面，我们不希望这样，因此您必须删除此输入并使用按钮标记。
$(document).ready(function(){ //this is executed when the document is fully loaded
     $("#submit").click(function(){
         $.post("mail.php", $("#cont-form").serialize(), function(data){
              //this is a callback function, when the AJAX calls ends anything 
              //echoed by mail.php goes into the data variable it receives.
              alert(data);
         });
     });
});