联系表单响应非常慢（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

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

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

---

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

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

2. 第二个PHP脚本：只发Email，不带modal等

---

   $.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 2

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

您的 PHP 脚本正在等待发送电子邮件。这不是应该做的。您需要使用邮件服务器发送它。请参阅此superb answer，了解如何使用PHPMailer 执行此操作。

Answer 3

@nickpish

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

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

如果后端脚本太慢，你可以进入你的后端文件。你有一个邮件功能，也许是服务器时间太长了。您可能需要将您的 smtp 切换到更快或保持原样。如果您选择保留当前的smtp，这可能需要一些时间，您应该考虑同时设置一个进度窗口。