PHP Mailer联系表单提交后页面刷新、Ajax响应异常问题求助

核心问题梳理 #

• 校验逻辑失效：校验不通过的情况下依然会发送AJAX请求，且回调函数变量引用错误导致响应无法渲染
• 服务端无输出：PHP处理完邮件发送逻辑后没有返回任何内容给前端
• 可选优化：补充表单默认提交行为拦截，彻底避免整页刷新

代码修改点 #

1. JavaScript代码修改 #

function validateContact() {
    "use strict";
    var valid = true;
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    var fullname = $("#fullname").val();
    var emailreg = $("#email").val();
    var message = $("#message").val();
    var formData = {
        fullname: fullname,
        email: emailreg,
        message: message,
    };

    if (fullname === "") { 
        $("#response_brought").html('<br clear="all"><div class="form_info" align="left">Please enter your fullname in the required field to proceed. Thanks.</div>');
        $("#fullname").focus();
        valid = false;
    } else if (emailreg === "") { 
        $("#response_brought").html('<br clear="all"><div class="form_info" align="left">Please enter your email address in the required email field to proceed. Thanks.</div>');
        $("#email").focus();
        valid = false;
    } else if (reg.test(emailreg) === false) { 
        $("#response_brought").html('<br clear="all"><div class="form_info" align="left">Sorry, your email address is invalid. Please enter a valid email address to proceed. Thanks.</div>');
        $("#email").focus();
        valid = false;
    } else if (message === "") { 
        $("#response_brought").html('<br clear="all"><div class="form_info" align="left">Please enter your message in the required message field to proceed. Thanks.</div>');
        $("#message").focus();
        valid = false;
    } 
    // 校验通过才发送请求，删掉之前强行设置valid=true的错误代码
    if(valid) {
        $.ajax({
            type: "POST",
            url: "sendemail.php",
            data: formData,
            success:function(data){
                // 把之前的response替换为回调参数data
                var response_brought = data.indexOf('Congrats');
                $(".contact-form").slideUp(500);
                $("#response_brought").html(data);
                setTimeout(function () {
                    $("#response_brought").html('');
                }, 10000);
            },
            error:function (){}
        });
    }
    // 阻止默认行为避免刷新
    return false;
}

2. PHP代码修改（末尾新增输出逻辑） #

use PHPMailer\PHPMailer\PHPMailer;

require_once 'phpmailer/src/Exception.php';
require_once 'phpmailer/src/PHPMailer.php';
require_once 'phpmailer/src/SMTP.php';

$mail = new PHPMailer(true);

$mail->IsSMTP();
$mail->Mailer = "smtp";

//$mail->SMTPDebug  = 2;
$mail->SMTPAuth   = True;

$mail->Host       = "smtp host";
$mail->Username   = "myemail";
$mail->Password   = "****";

$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
$mail->Port = '587';

$fullname     = $_POST['fullname'] ?? '';
$email    = $_POST['email'] ?? '';
$message = $_POST['message'] ?? '';

$success = $error = '';

if (!empty($fullname) && !empty($email) && !empty($message)) {
    try {
        $mail->setFrom('myemail');
        $mail->addAddress('myemail');
        $mail->isHTML(true);
        $mail->Subject = 'Mail poslan iz spletnega obrazca';
        $mail->Body = "Ime: " . $_POST["fullname"] . "<br> Email: " . $_POST["email"] . "<br>";
        $mail->Body .= $message;
        $mail->send();
        $success = "Message sent successfully";
    } catch (Exception $e) {
        $error = "Sorry message could not send, try again";
    } 
}

// 新增：返回响应给前端
if(!empty($success)) {
    echo $success;
}else{
    echo $error ? $error : '参数填写不完整';
}

额外优化（可选） #

如果还是存在整页刷新的问题，可以把按钮的点击事件绑定改为表单的submit事件绑定，同时明确阻止默认行为：

// 删掉button的onclick属性，新增如下绑定代码
$('#contact-form').on('submit', function(e) {
    e.preventDefault();
    validateContact();
})
// 同时把button的type改为submit，更符合语义

内容的提问来源于stack exchange，提问作者devZ