联系表单提交成功消息显示在PHP页面而非HTML页面问题求助

问题现象 #

提交联系表单后，成功提示Contact form successfully submitted. Thank you, I will get back to you soon!直接显示在ebsg.php页面，而非原HTML表单所在页面。

核心原因 #

当前JS代码仅模拟本地提示，并未通过AJAX向PHP发送实际表单数据，表单仍触发默认提交跳转；同时PHP端仅在AJAX请求时返回JSON，非AJAX请求直接输出文本，导致跳转后显示提示。

修复方案 #

步骤1：修改JS代码，实现AJAX异步提交 #

替换原JS逻辑，阻止表单默认提交，通过AJAX发送所有表单数据（包括reCAPTCHA响应），并根据PHP返回的JSON响应在原页面渲染提示：

$(function() {
  // 初始化表单验证
  $("#contact-form").validator();

  // 监听表单提交事件
  $("#contact-form").on("submit", function(e) {
    // 阻止默认提交行为
    e.preventDefault();
    
    // 如果验证通过
    if (!e.isDefaultPrevented()) {
      var $form = $(this);
      var url = $form.attr("action");

      // 发送AJAX请求
      $.ajax({
        type: "POST",
        url: url,
        data: $form.serialize(), // 序列化所有表单数据（含reCAPTCHA）
        dataType: "json",
        success: function(response) {
          var messageAlert = response.type === "success" ? "alert-success" : "alert-danger";
          var alertBox = `
            <div class="alert ${messageAlert} alert-dismissable">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              ${response.message}
            </div>
          `;
          
          // 渲染提示并重置表单
          $form.find(".message").html(alertBox);
          $form[0].reset();
          // 重置reCAPTCHA
          if (typeof grecaptcha !== "undefined") {
            grecaptcha.reset();
          }
        },
        error: function() {
          // 请求失败提示
          var alertBox = `
            <div class="alert alert-danger alert-dismissable">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              提交失败，请稍后重试
            </div>
          `;
          $form.find(".message").html(alertBox);
        }
      });
    }
  });
});

步骤2：修正PHP代码逻辑 #

原PHP逻辑基本可用，需调整非AJAX请求的处理，并替换reCAPTCHA密钥：

<?php
function post_captcha($user_response) {
    $fields_string = '';
    $fields = array(
        'secret' => '你的reCAPTCHA密钥', // 替换为真实密钥
        'response' => $user_response
    );
    foreach($fields as $key=>$value)
        $fields_string .= $key . '=' . $value . '&';
    $fields_string = rtrim($fields_string, '&');

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, 'https://www.google.com/recaptcha/api/siteverify');
    curl_setopt($ch, CURLOPT_POST, count($fields));
    curl_setopt($ch, CURLOPT_POSTFIELDS, $fields_string);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    $result = curl_exec($ch);
    curl_close($ch);

    return json_decode($result, true);
}

// 验证reCAPTCHA
$res = post_captcha($_POST['g-recaptcha-response']);

if (!$res['success']) {
    $responseArray = array('type' => 'danger', 'message' => '请勾选安全验证框后重试');
} else {
    // 邮件配置
    $from = 'ebsg contact form <ebsg@domain.com>';
    $sendTo = 'ebsg contact form <email@yahoo.co.uk>';
    $subject = 'ebsg contact form message';
    $fields = array('name' => '姓名', 'surname' => '地址', 'phone' => '电话', 'email' => '邮箱', 'message' => '留言');
    $okMessage = '表单提交成功！感谢你的留言，我会尽快回复你！';
    $errorMessage = '提交过程中出现错误，请稍后重试';

    try {
        $emailText = "你收到了来自ebsg网站的新留言\n=============================\n";
        foreach ($_POST as $key => $value) {
            if (isset($fields[$key])) {
                $emailText .= "{$fields[$key]}: {$value}\n";
            }
        }
        mail($sendTo, $subject, $emailText, "From: " . $from);
        $responseArray = array('type' => 'success', 'message' => $okMessage);
    } catch (\Exception $e) {
        $responseArray = array('type' => 'danger', 'message' => $errorMessage);
    }
}

// 处理响应
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    header('Content-Type: application/json');
    echo json_encode($responseArray);
} else {
    // 非AJAX请求跳转回表单页面
    header('Location: 你的表单页面URL'); // 替换为表单所在HTML页面地址
    exit;
}
?>

步骤3：HTML表单保持不变 #

原HTML表单结构无需修改，确保action属性指向ebsg.php即可。

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