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

我正在建立一个非常基本的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
$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";
}

?>

$('#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");
    }

---

我省略了所有表单验证功能，只保留了最基本的功能。我不确定是否是服务器导致了缓慢的响应，但理想情况下，我希望在用户单击submit时立即显示成功消息。感谢您的帮助。

您是否尝试发表评论

$success=mail（$EmailTo，$Subject，$Body，“From:”.$email）

我可能错了，但发送电子邮件可能需要几秒钟时间

我建议您使用其他ajax请求发送电子邮件


因为PHP不是异步语言，至少在默认情况下是这样

第一个PHP脚本：
从JS接收数据，并以200（成功）响应


jQuery将在发送电子邮件之前触发“成功”事件。

这不会阻止或打扰您和其他用户

第二个PHP脚本：只发送电子邮件，没有模式等


您是否尝试注释掉

$success=mail（$EmailTo，$Subject，$Body，“From:”.$email）

我可能错了，但发送电子邮件可能需要几秒钟时间

我建议您使用其他ajax请求发送电子邮件


因为PHP不是异步语言，至少在默认情况下是这样

第一个PHP脚本：
从JS接收数据，并以200（成功）响应


jQuery将在发送电子邮件之前触发“成功”事件。

这不会阻止或打扰您和其他用户

第二个PHP脚本：只发送电子邮件，没有模式等


我假设您假设的是
PHPMailer
，但如果我错了，请纠正我。如果没有，请考虑使用它来实现下一个部分。
您的PHP脚本正在等待发送电子邮件。这不是应该怎么做的。您需要使用邮件服务器发送它。有关如何使用
PHPMailer
执行此操作的信息，我将假设您使用的是
PHPMailer
，但如果我错了，请纠正我。如果没有，请考虑使用它来实现下一个部分。
您的PHP脚本正在等待发送电子邮件。这不是应该怎么做的。您需要使用邮件服务器发送它。有关如何使用
PHPMailer
@nickpish执行此操作的信息，请参见此

您有
php
、
jquery
和
ajax
。瓶颈问题可能是前端或后端。您需要一个功能强大的工具来调试该问题。如果您的
jquery
中有一个错误，就没有办法解决这个问题。此外，如果您有后端问题，这可能会导致您的
jquery
花更多时间回复前端ui。如果你看下图


您需要使用类似firefox的东西，（右键单击ui上的任意位置并选择[
Inspect Element Q
），单击网络面板并选择
XHR
。在控制台窗口中，您将看到是否有任何错误；此外，您会注意到后端php文件，它会给您一个响应时间

如果后端脚本太慢，您可以进入后端文件。您有邮件功能，可能是服务器占用的时间太长。您可能需要将
smtp
切换到更快的版本或保持原样。如果您选择使用当前的
smtp
，这可能需要时间，您应该考虑放置一个程序同时关闭窗口。
@nickpish

你有
php
、
jquery
和
ajax
。瓶颈的问题可能是前端或后端。你需要一个强大的工具来调试这个问题。如果你的
jquery
中有错误，就没有办法解决。此外，如果你有后端问题，这可能会导致你的失败
jquery
以花费更多时间回复前端用户界面。如果您查看下图


您需要使用类似firefox的东西，（右键单击ui上的任意位置并选择[
Inspect Element Q
），单击网络面板并选择
XHR
。在控制台窗口中，您将看到是否有任何错误；此外，您会注意到后端php文件，它会给您一个响应时间

如果后端脚本太慢，您可以进入后端文件。您有邮件功能，可能是服务器占用的时间太长。您可能需要将
smtp
切换到更快的版本或保持原样。如果您选择使用当前的
smtp
，这可能需要时间，您应该考虑放置一个程序与此同时，ess窗口。
第一猜测-这是因为它正在等待电子邮件发送。我们不可能知道您提供的信息。为什么您要在
.submit（）
方法中嵌入另一个函数？@JayBlanchard-我应该提供什么进一步的信息？该网站托管在MediaTemple上（共享）。可以肯定的是，由于电子邮件功能，它取决于您的服务器…首先猜测-这是因为它正在等待电子邮件发送。我们无法知道您提供的信息。为什么要在
.submit（）中嵌入另一个功能
method？@JayBlanchard-我应该提供什么进一步的信息？该网站位于MediaTemple（共享）上。很确定这是因为电子邮件功能，它取决于您的服务器…为什么您建议使用另一个请求发送电子邮件？这如何加快成功/失败的结果？因为PHP不是异步语言，至少在默认情况下是这样的。第一个PHP脚本只是
从JS接收数据，并以200（成功）响应
，因此jQuery将触发“成功”
   $.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
        }
   }