非常慢的联系表单响应（PHP/jQuery/Ajax）

Question

我设置了一个非常基本的PHP/jQuery/Ajax联系表单;并且在工作时，响应非常缓慢（成功消息显示5秒以上），我想知道我可能会做错什么。

这里是所有相关代码：

标记：

<form id="contact-form" name="contact-form" action="php/form-process.php" method="post" role="form"> 
    <input type="text" name="name" id="name" placeholder="Name" required> 
    <input type="email" name="email" id="email" placeholder="Email" required> 
    <textarea id="message" name="message" rows="5" placeholder="Your message" required></textarea> 
    <button type="submit" id="form-submit" class="contact-button">Submit</button> 
    <div id="msg-submit" class="hidden">Message sumbitted!</div> 
</form> 

PHP：

<?php 
$name = $_POST["name"]; 
$email = $_POST["email"]; 
$message = $_POST["message"]; 

$EmailTo = "test@test.com"; 
$Subject = "New Contact Form Message"; 

// prepare email body text 
$Body .= "Name: "; 
$Body .= $name; 
$Body .= "\n"; 

$Body .= "Email: "; 
$Body .= $email; 
$Body .= "\n"; 

$Body .= "Message: "; 
$Body .= $message; 
$Body .= "\n"; 

// send email 
$success = mail($EmailTo, $Subject, $Body, "From:".$email); 

// redirect to success page 
if ($success){ 
    echo "success"; 
}else{ 
    echo "invalid"; 
} 

?> 

的jQuery：

$('#contact-form').submit(function(event){ 
     event.preventDefault(); 
     submitForm(); 
    }); 

    function submitForm(){ 
     var $this = $('#contact-form'); 
     $.ajax({ 
      type: $this.attr('method'), 
      url: $this.attr('action'), 
      data: $this.serialize(), 
      success : function(text){ 
       if (text == "success"){ 
        formSuccess(); 
       } 
      } 
     }); 
    } 
    function formSuccess(){ 
     $("#msg-submit").removeClass("hidden"); 
    } 

我遗漏了所有表单验证功能以坚持绝对的基础知识。我不确定是否服务器导致响应速度缓慢，但理想情况下，只要用户单击提交，我就希望显示成功消息。感谢您的帮助。

Answer 1

我要去，如果我”呈现你假设PHPMailer，但指正米错了。如果没有，请考虑使用它来实现下一部分。

您的PHP脚本正在等待要发送的电子邮件。这不是应该如何完成的。您需要使用邮件服务器发送邮件。如何使用PHPMailer查看此superb answer。

Answer 2

您是否尝试过注释掉
$success = mail($EmailTo, $Subject, $Body, "From:".$email);？

我可能是错的，但是，发送电子邮件可能需要几秒钟
我建议您使用其他ajax请求发送电子邮件。

---

因为PHP不是异步语言，至少默认。

1. 首先PHP脚本：receive datas from JS, and respond with 200(success)
   jQuery将发送电子邮件之前触发 '成功' 事件。
   这不会阻止或打扰您和其他用户。

2. 二PHP脚本：只是发送电子邮件，而无需模态等

---

$.ajax({ 
     //here, you could send some infos to use with DB, check if 
     //datas, e-mail is valid with filter_var($email, FILTER_VALIDATE_EMAIL), etc.. 
     type: $this.attr('method'), 
     url: $this.attr('action'), 
     data: $this.serialize(), 
     success : function(text){ 
      if (text == "success"){ 
       formSuccess(); 
      } 
     } 
    }); 
    function formSuccess(){ 
     $("#msg-submit").removeClass("hidden"); 
     $.ajax({ 
     //here, you could send some infos to build and send Email 
     //It's right, because the first ajax did succeed right ? 
     type: $this.attr('method'), 
     url: $this.attr('action'), 
     data: $this.serialize(), 
     success : function(text){ 
      //yey :D 
     } 
    } 

Answer 3

@nickpish

你有php，jquery和ajax。瓶颈问题可以是前端或后端。您需要一个强大的工具来调试问题。如果您的jquery中有错误，则无法解决此问题。此外，如果您有后端问题，可能会导致您的jquery花更多时间回应您的前端UI。如果你看一下下面的图片

你需要使用像火狐，（右键单击上的任何地方的用户界面，选择[Inspect Element Q]点击网面板上，选择XHR。在控制台窗口中看看是否有任何错误;此外，你会注意到你的后端php文件，它会给你一个响应时间。

如果后端脚本太慢，你可以进入你的后端文件，你有一个邮件功能，可能是服务器需要很长时间，你可能需要更快地切换你的smtp，或者保持原样。为了保持您当前的smtp可能需要时间，您应该考虑在此期间放置一个进度窗口。