如何阻止PHP表单提交脚本打开新空白页面？

嘿，这个问题我太熟了！核心原因就是默认的表单提交是同步请求，浏览器会直接跳转到action指定的PHP脚本页面，所以才会出现空白页。要留在原页面，咱们得用AJAX异步提交，让JavaScript在后台偷偷把数据发给PHP，然后接收返回结果再在原页面显示提示。

下面是具体的修改方案，分前端和后端两部分：

一、修改前端表单与添加AJAX代码 #

首先调整你的HTML表单，去掉action属性（或者设为空），给表单加个ID方便JS获取，同时阻止默认的提交行为：

<!-- 给表单加id，去掉action或者设为"" -->
<form id="contactForm" method="POST">
  <!-- 你的表单字段，比如姓名、邮箱、消息 -->
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  
  <!-- reCAPTCHA 组件，保持原样 -->
  <div class="g-recaptcha" data-sitekey="你的站点密钥"></div>
  
  <!-- 提交按钮 -->
  <button type="submit">提交</button>
  
  <!-- 用来显示提示的元素，可选 -->
  <div id="formAlert"></div>
</form>

然后添加JavaScript代码，用fetch API（现代浏览器都支持）来处理异步提交：

document.getElementById('contactForm').addEventListener('submit', async function(e) {
  // 阻止默认的表单提交跳转
  e.preventDefault();
  
  const alertElement = document.getElementById('formAlert');
  const submitBtn = this.querySelector('button[type="submit"]');
  
  // 禁用提交按钮，防止重复提交
  submitBtn.disabled = true;
  submitBtn.textContent = '提交中...';
  
  try {
    // 获取reCAPTCHA的验证token
    const recaptchaToken = grecaptcha.getResponse();
    if (!recaptchaToken) {
      alertElement.innerHTML = '<span style="color:red;">请完成人机验证！</span>';
      submitBtn.disabled = false;
      submitBtn.textContent = '提交';
      return;
    }
    
    // 收集表单数据，把reCAPTCHA token也加进去
    const formData = new FormData(this);
    formData.append('g-recaptcha-response', recaptchaToken);
    
    // 发送异步请求到PHP脚本
    const response = await fetch('你的PHP脚本路径.php', {
      method: 'POST',
      body: formData
    });
    
    // 解析PHP返回的JSON结果
    const result = await response.json();
    
    // 根据结果显示提示
    if (result.success) {
      alertElement.innerHTML = '<span style="color:green;">' + result.message + '</span>';
      // 重置表单
      this.reset();
      // 重置reCAPTCHA
      grecaptcha.reset();
    } else {
      alertElement.innerHTML = '<span style="color:red;">' + result.message + '</span>';
    }
  } catch (error) {
    alertElement.innerHTML = '<span style="color:red;">提交失败，请稍后重试！</span>';
    console.error('提交出错:', error);
  } finally {
    // 恢复提交按钮状态
    submitBtn.disabled = false;
    submitBtn.textContent = '提交';
  }
});

二、调整PHP脚本返回JSON响应 #

原来的PHP脚本应该是直接输出提示文本或者HTML，现在需要改成返回JSON格式的数据，这样前端JS才能正确解析：

<?php
// 保持你的reCAPTCHA验证、邮件发送逻辑不变，只修改输出部分

// 初始化结果数组
$result = ['success' => false, 'message' => ''];

// 1. reCAPTCHA验证逻辑（你的原有代码）
$recaptchaSecret = '你的reCAPTCHA密钥';
$recaptchaResponse = $_POST['g-recaptcha-response'] ?? '';

$recaptchaUrl = 'https://www.google.com/recaptcha/api/siteverify';
$recaptchaData = [
    'secret' => $recaptchaSecret,
    'response' => $recaptchaResponse
];

$recaptchaOptions = [
    'http' => [
        'header' => "Content-type: application/x-www-form-urlencoded\r\n",
        'method' => 'POST',
        'content' => http_build_query($recaptchaData)
    ]
];

$recaptchaContext = stream_context_create($recaptchaOptions);
$recaptchaResult = json_decode(file_get_contents($recaptchaUrl, false, $recaptchaContext), true);

if (!$recaptchaResult['success']) {
    $result['message'] = '人机验证失败，请重试！';
    echo json_encode($result);
    exit;
}

// 2. 邮件发送逻辑（你的原有代码）
$name = $_POST['name'] ?? '';
$email = $_POST['email'] ?? '';
$message = $_POST['message'] ?? '';

// 验证表单字段（你的原有代码）
if (empty($name) || empty($email) || empty($message)) {
    $result['message'] = '请填写所有必填字段！';
    echo json_encode($result);
    exit;
}

// 发送邮件（你的原有代码）
$to = '你的邮箱地址';
$subject = '新的联系表单提交';
$body = "姓名: $name\n邮箱: $email\n消息: $message";
$headers = "From: $email\r\nReply-To: $email";

if (mail($to, $subject, $body, $headers)) {
    $result['success'] = true;
    $result['message'] = '提交成功！我们会尽快回复你。';
} else {
    $result['message'] = '邮件发送失败，请稍后重试！';
}

// 最后输出JSON结果
echo json_encode($result);
exit;
?>

关键注意点 #

• 确保你的reCAPTCHA站点密钥和密钥正确配置，前后端要对应。
• 如果用户的浏览器比较旧（比如IE），可以把fetch换成XMLHttpRequest，不过现在大部分用户都用现代浏览器了，fetch足够用。
• 表单里的提示元素#formAlert可以根据你的页面样式自定义，比alert()更友好。
• 一定要在PHP脚本开头加上exit或者die，避免输出多余的空白字符，导致JSON解析失败。

这样修改后，用户提交表单时就不会跳转了，所有操作都在原页面完成，提示也会直接显示在页面上～

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