使用AJAX时Google ReCAPTCHA失效问题求助

我来帮你搞定这个AJAX提交时reCAPTCHA失效的问题——这种情况在模态框里太常见了，主要是动态渲染和提交逻辑没匹配好，给你几个关键的解决方案：

1. 确保reCAPTCHA在模态框显示后再渲染 #

因为你的表单在reveal模态框里，页面初始化时模态框是隐藏的，reCAPTCHA容器可能还没被加载到DOM的可视区域，导致自动渲染失败。解决办法是在模态框打开的回调事件里手动渲染reCAPTCHA：

先在表单里加一个空的reCAPTCHA容器：

<div id="recaptcha-container"></div>

然后用Foundation Reveal的open.zf.reveal事件触发渲染：

$('#contactModal').on('open.zf.reveal', function() {
  // 手动渲染reCAPTCHA，替换成你的Site Key
  grecaptcha.render('recaptcha-container', {
    'sitekey': '你的Google reCAPTCHA Site Key',
    'callback': function(response) {
      // 把验证响应值存入隐藏字段，方便AJAX提交时携带
      $('#g-recaptcha-response').val(response);
    }
  });
});

2. AJAX提交时务必携带reCAPTCHA响应值 #

一定要在表单里加一个隐藏字段专门存reCAPTCHA的响应值：

<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

然后在AJAX提交代码里，确保这个字段被序列化发送到后端：

$('#ajax-contact').submit(function(e) {
  e.preventDefault();
  
  // 序列化表单数据，包含隐藏的reCAPTCHA响应值
  var formData = $(this).serialize();

  $.ajax({
    url: $(this).attr('action'),
    type: 'POST',
    data: formData,
    success: function(response) {
      // 处理成功逻辑，比如关闭模态框
      $('#contactModal').foundation('close');
      alert('提交成功！');
    },
    error: function() {
      alert('提交失败，请重试');
    }
  });
});

3. 后端必须严格验证reCAPTCHA #

别只靠前端！后端ajaxsubmit.php必须调用Google的验证接口，确认响应值有效：

<?php
// 替换成你的reCAPTCHA Secret Key
$recaptchaSecret = '你的Secret Key';
$recaptchaResponse = $_POST['g-recaptcha-response'];
$userIp = $_SERVER['REMOTE_ADDR'];

// 调用Google验证接口
$verifyUrl = 'https://www.google.com/recaptcha/api/siteverify';
$postData = http_build_query([
    'secret' => $recaptchaSecret,
    'response' => $recaptchaResponse,
    'remoteip' => $userIp
]);

$options = [
    'http' => [
        'method' => 'POST',
        'header' => 'Content-Type: application/x-www-form-urlencoded',
        'content' => $postData
    ]
];
$context = stream_context_create($options);
$verifyResult = json_decode(file_get_contents($verifyUrl, false, $context));

// 验证失败直接返回错误
if (!$verifyResult->success) {
    echo json_encode(['status' => 'error', 'msg' => '人机验证失败，请重试']);
    exit;
}

// 验证通过，再处理表单提交逻辑（比如发送邮件、存数据库）
// ...
?>

4. 模态框关闭时重置reCAPTCHA #

避免多次打开模态框导致reCAPTCHA重复渲染，在模态框关闭时重置实例：

$('#contactModal').on('close.zf.reveal', function() {
  // 重置reCAPTCHA，清除之前的验证状态
  grecaptcha.reset();
});

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