邮件表单成功提示消息时有时无问题求助

问题描述 #

邮件表单提交后，成功提示消息有时能正常显示，但大多数时候无法出现。本人擅长手工实操，对这类技术问题不熟悉，需要帮助。

现有代码 #

send-email-ajax.js

var form = $('#contact-form');

$(document).ready(function () {
  form.submit(function (e) {
    e.preventDefault();
    sendEmail();
  });
});

function sendEmail() {
  var dataStr = form.serialize();
  $.ajax({
    type: "POST",
    url: "https://*********/mail/send-email.php",
    data: dataStr,
    success: function (result) {
      if (result == "success") {
        form.trigger("reset");
        showMessage(true, "Message successfully- we will reply soon..Message réussi - nous vous répondrons bientôt.");
      } else {
        showMessage(false, result);
      }
    }
  });
}

function showMessage(valid, msg) {
  var msgClasses;
  if (valid) {
    msgClasses = "alert alert-success";
  } else {
    msgClasses = "alert alert-danger";
  }
  $("#result-message")
    .removeClass()
    .addClass(msgClasses)
    .text(msg);
}

PHP代码

<?php
if(!isset($_SERVER['HTTP_REFERER'])){
    // redirect them to your desired location
    header('location: /index.html');
    exit;
}

    $to = "*******@hotmail.com";;   
    $from = "no_reply@*******";
    $subject = "New Message From Website";
    $error = "";
    $body = "";
    // Filter Spam
    if(isset($_POST['url']) && $_POST['url'] != ''){
        echo "success";
        exit(0);
    }

    foreach ($_POST as $param_name => $param_val) {
        if($param_name == 'url') {
            // Do not include spam filter variable
            continue;
        }
        $body .= ucwords(str_replace("_", " ", $param_name)) . ": " . $param_val . "\n";
    }

    if (isset($_POST['submit'])) {
    $to = $_POST['email']; 
    $subject = $_POST['name'];
    $from = "******@puy-robin.co.uk";
    $headers = "From:" . $from;
    }

    if($from != "") {
        $success = mail($to, $subject, $body, "From:" . $from);
    } else {
        $error = "Email is required";
    }
    
    if ($success && $error == ""){
        echo "success";
    } else {
        if($error == ""){
            echo "Something went wrong :(&quot;;
        } else {
            echo $error;
        }
    } 
?>

修复步骤 #

1. 修复PHP代码错误 #

直接替换成下面的代码，注释标注了修改点：

<?php
// 移除不可靠的跳转判断，避免无故跳走看不到提示
// if(!isset($_SERVER['HTTP_REFERER'])){
//     header('location: /index.html');
//     exit;
// }

$to = "*******@hotmail.com";   // 去掉多余的分号
$from = "no_reply@*******";
$subject = "New Message From Website";
$error = "";
$body = "";

// 保留垃圾邮件过滤逻辑
if(isset($_POST['url']) && $_POST['url'] != ''){
    echo "success";
    exit(0);
}

// 构建邮件内容，排除submit字段
foreach ($_POST as $param_name => $param_val) {
    if($param_name == 'url' || $param_name == 'submit') {
        continue;
    }
    $body .= ucwords(str_replace("_", " ", $param_name)) . ": " . $param_val . "\n";
}

// 移除会覆盖收件人的逻辑，避免邮件发错地方
// if (isset($_POST['submit'])) {
// $to = $_POST['email']; 
// $subject = $_POST['name'];
// $from = "******@puy-robin.co.uk";
// $headers = "From:" . $from;
// }

// 完善邮件头，降低被当成垃圾邮件的概率
$headers = "From: " . $from . "\r\n";
$headers .= "Reply-To: " . $_POST['email'] . "\r\n"; // 方便直接回复用户
$headers .= "Content-Type: text/plain; charset=UTF-8\r\n";

if($from != "") {
    $success = mail($to, $subject, $body, $headers);
} else {
    $error = "发件人邮箱配置错误";
}

// 修复引号语法错误
if ($success && $error == ""){
    echo "success";
} else {
    if($error == ""){
        echo "邮件发送失败，请稍后重试";
    } else {
        echo $error;
    }
} 
?>

2. 完善JS的错误处理 #

替换JS代码，增加网络请求失败时的提示：

var form = $('#contact-form');

$(document).ready(function () {
  form.submit(function (e) {
    e.preventDefault();
    sendEmail();
  });
});

function sendEmail() {
  var dataStr = form.serialize();
  $.ajax({
    type: "POST",
    url: "https://*********/mail/send-email.php",
    data: dataStr,
    success: function (result) {
      // 去除返回结果的空白字符，避免判断失败
      result = result.trim();
      if (result == "success") {
        form.trigger("reset");
        showMessage(true, "消息发送成功，我们会尽快回复您。Message réussi - nous vous répondrons bientôt.");
      } else {
        showMessage(false, result);
      }
    },
    // 新增：网络请求失败时的提示
    error: function() {
      showMessage(false, "网络请求失败，请检查网络或稍后重试");
    }
  });
}

function showMessage(valid, msg) {
  var msgClasses;
  if (valid) {
    msgClasses = "alert alert-success";
  } else {
    msgClasses = "alert alert-danger";
  }
  $("#result-message")
    .removeClass()
    .addClass(msgClasses)
    .text(msg);
}

3. 检查HTML表单 #

确保你的表单里有一个id="result-message"的元素（比如<div id="result-message"></div>），用来显示提示消息。

问题根源说明 #

1. PHP代码存在语法错误（引号未闭合），导致服务器返回异常内容，JS无法识别为"success"
2. 部分逻辑会覆盖收件人邮箱，导致邮件发给用户而非你，你收不到邮件但提示却显示成功
3. AJAX没有处理请求失败的情况，网络出问题时完全没提示
4. HTTP_REFERER判断不可靠，可能导致直接跳转，用户看不到任何提示

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