如何通过Ajax和JavaScript判断PHPMailer邮件是否发送成功

核心问题梳理 #

• 前端JS校验结束后强制重置了valid = true，导致校验逻辑完全失效，无论输入是否符合要求都会发起AJAX请求
• AJAX请求头配置错误，contentType: "application/json"会导致后端PHP无法通过$_POST读取提交的表单参数
• 后端PHP代码语法不完整，缺少判断逻辑和代码块的闭合大括号，同时缺失PHPMailer必填的SMTP账号配置
• 原代码AJAX回调中的表单选择器和HTML实际类名不匹配，会导致提交成功后表单无法隐藏

修正后的前端JS代码 #

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">请输入您的全名后再提交。</div>');
        $("#fullname").focus();
        valid = false;
    } else if (emailreg === "") {
        $("#response_brought").html('<br clear="all"><div class="form_info" align="left">请输入您的邮箱地址后再提交。</div>');
        $("#email").focus();
        valid = false;
    } else if (reg.test(emailreg) === false) {
        $("#response_brought").html('<br clear="all"><div class="form_info" align="left">您输入的邮箱地址无效，请输入正确的邮箱后再提交。</div>');
        $("#email").focus();
        valid = false;
    } else if (message === "") {
        $("#response_brought").html('<br clear="all"><div class="form_info" align="left">请输入您要发送的内容后再提交。</div>');
        $("#message").focus();
        valid = false;
    }
    // 只有校验通过才发起AJAX请求
    if (valid) {
        $.ajax({ 
            type: "POST", 
            url: "sendemail.php", 
            dataType: "json",
            data: formData, 
            success:function(res){ 
                if(res.success){
                    $(".contact").slideUp(500); 
                    $("#response_brought").html('<br clear="all"><div class="form_info" align="left">感谢您的来信，我们会尽快回复。</div>');
                }
                else{
                    $("#response_brought").html('<br clear="all"><div class="form_info" align="left">很抱歉，邮件发送暂时出现故障，请稍后再试。</div>');
                }
            },
            error:function (){
                $("#response_brought").html('<br clear="all"><div class="form_info" align="left">网络请求失败，请检查网络后重试。</div>');
            } 
        });
    }
}

修正后的后端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->SMTPAuth   = True;
$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
$mail->Port = '587';
// 请替换为你自己的SMTP配置
$mail->Host = '你的SMTP服务器地址'; // 例：smtp.qq.com、smtp.gmail.com
$mail->Username = '你的发信邮箱地址';
$mail->Password = '你的发信邮箱授权码';

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

if (!empty($fullname) && !empty($email) && !empty($message)) {
    try {
        $mail->setFrom($email, $fullname);
        $mail->addAddress('你的收信邮箱地址');
        $mail->isHTML(true);
        $mail->Subject = '网站联系表单来信';
        $mail->Body = "姓名: " . $fullname . "<br> 邮箱: " . $email . "<br>";
        $mail->Body .= "留言内容: <br>" . $message;
        $mail->send();
        $output = json_encode(array('success' => true));
        echo $output;
    } catch (Exception $e) {
        $output = json_encode(array('success' => false));
        echo $output;
    }
} else {
    $output = json_encode(array('success' => false));
    echo $output;
}

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