如何从PHPMailer获取AJAX响应实现联系表单邮件发送状态提示

问题根因 #

• PHPMailer开启了调试输出，污染了返回的JSON结构：你配置了$mail->SMTPDebug = SMTP::DEBUG_SERVER，该参数会输出完整的SMTP交互日志，导致返回给前端的内容除了预期的JSON之外，还有大量调试字符串，前端无法正常解析JSON格式就会抛出报错。
• AJAX请求的contentType配置错误：你传递的是普通表单键值对数据，但配置了contentType: "application/json"，PHP无法通过$_POST正常接收参数，可能触发代码异常，进一步破坏返回的JSON格式。
• 未阻止表单默认提交行为：按钮放在form标签内，默认类型是submit，点击时除了触发你写的sendMail函数，还会触发表单默认的跳转提交行为，导致AJAX请求被中断，响应异常。

修复步骤 #

1. 修改PHP代码 #

关闭PHPMailer调试输出，确保没有额外内容输出：

// 把原来的SMTPDebug配置替换为下面这行
$mail->SMTPDebug = SMTP::DEBUG_OFF;

同时确保PHP代码中除了最后echo json_encode($output)之外，没有其他echo、print输出，也不要有PHP报错、警告信息输出，避免污染JSON结构。

2. 修改JavaScript代码 #

首先删除AJAX配置中的contentType: "application/json"行，使用默认的表单类型即可，调整后的AJAX配置参考：

$.ajax({
    type: "POST",
    url: "sendMail.php",
    data: {
        name: name,
        email: email,
        phone: phone,
        subject: subject,
        message: message
    },
    success: function (data) { 
        console.log(data); 
        // 这里可以补充发送成功/失败的提示逻辑
    },
    error: function(xhr, err) {
        console.log('请求错误：', xhr.responseText);
    },
    dataType: "json"
})

然后阻止表单默认提交行为，两种方式选其一即可：

• 给按钮添加type="button"属性：<button type="button" class="btn btn-outline-secondary" onclick="sendMail()">Send Message!</button>
• 或者修改sendMail函数，接收事件参数并阻止默认行为：

function sendMail(e) {
    e.preventDefault();
    // 原有逻辑保持不变
}

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