JavaScript实现表单发送POST请求且阻止页面重载（含reCAPTCHA v2场景）

1. 前端获取reCAPTCHA验证结果 #

Google reCAPTCHA v2 提供了官方JS API直接获取验证响应值，不需要手动读取表单元素：
调用 grecaptcha.getResponse() 即可拿到和表单提交时一致的 g-recaptcha-response 字符串，验证未完成时返回空值。

2. 无刷新提交验证代码示例 #

// 假设你的表单id为 registerForm
document.getElementById('registerForm').addEventListener('submit', async function(e) {
  // 阻止默认页面跳转
  e.preventDefault();
  
  // 获取验证码响应值
  const captchaResponse = grecaptcha.getResponse();
  if (!captchaResponse) {
    alert('请先完成人机验证');
    return;
  }

  // 构造提交参数
  const formData = new FormData();
  formData.append('g-recaptcha-response', captchaResponse);
  // 可按需追加其他表单字段，比如账号、密码等
  // formData.append('username', document.getElementById('username').value);

  try {
    const res = await fetch(window.location.href, {
      method: 'POST',
      body: formData
    });
    const result = await res.text();
    if (result === 'Success!') {
      // 验证通过后的业务逻辑，比如提交其他数据、更新页面状态等
      alert('验证通过');
    } else {
      alert('人机验证失败，请重试');
      // 重置验证码
      grecaptcha.reset();
    }
  } catch (err) {
    alert('请求出错，请重试');
  }
})

3. PHP代码优化（可选） #

你现有的PHP验证代码可直接使用，也可做如下简化优化：

if (isset($_POST['g-recaptcha-response'])) {
  function CheckCaptcha($userResponse) {
    $fields = array(
        'secret' => 'secret_key',
        'response' => $userResponse
    );

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, 'https://www.google.com/recaptcha/api/siteverify');
    curl_setopt($ch, CURLOPT_POST, true);
    // 直接传数组无需手动拼接参数
    curl_setopt($ch, CURLOPT_POSTFIELDS, $fields);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    // 线上环境建议开启SSL校验，调试阶段可临时关闭
    // curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);
    // curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);

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

    return json_decode($res, true);
  }
  $result = CheckCaptcha($_POST['g-recaptcha-response']);

  // 如果是AJAX请求，返回结果后直接终止，避免输出后续页面内容
  if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
    echo $result['success'] ? 'Success!' : 'Error';
    exit;
  }
}

注意事项 #

• 确保页面已经加载reCAPTCHA官方JS脚本，否则grecaptcha对象会不存在
• 验证失败后调用grecaptcha.reset()重置验证码，避免重复提交失效的验证结果

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