reCAPTCHA提交后页面不刷新解决方法

本文旨在解决在使用 reCAPTCHA v2 的表单提交时，页面发生重载的问题。我们将通过 JavaScript 获取 reCAPTCHA 的响应，并使用 AJAX 将其发送到服务器进行验证，从而避免页面刷新，保证用户体验。本教程提供了详细的代码示例，帮助你轻松实现表单的异步提交和验证。

在使用 reCAPTCHA v2 的表单中，默认情况下，提交表单会导致页面重新加载。这通常不是我们期望的行为，尤其是在需要保持页面上的其他数据或状态时。为了解决这个问题，我们需要使用 JavaScript 拦截表单的默认提交行为，并通过 AJAX 将 reCAPTCHA 的响应发送到服务器进行验证。

步骤 1：引入 reCAPTCHA API 并配置回调函数

首先，在 HTML 中引入 reCAPTCHA API，并配置 onload 和 render 参数。onload 参数指定一个回调函数，该函数将在 reCAPTCHA API 加载完成后执行。render=explicit 允许我们手动渲染 reCAPTCHA。

接下来，定义回调函数 onloadCallback，在该函数中使用 grecaptcha.render 方法渲染 reCAPTCHA。我们需要指定 reCAPTCHA 的容器 ID (recaptcha) 和站点密钥 (sitekey)。

请务必将 your_site_key 替换为你实际的 reCAPTCHA 站点密钥。

步骤 2：拦截表单提交并获取 reCAPTCHA 响应

使用 JavaScript 拦截表单的提交事件，并调用 grecaptcha.getResponse 方法获取 reCAPTCHA 的响应。grecaptcha.getResponse 需要 reCAPTCHA 的 widget ID 作为参数。

$('form').submit(function(e) {
  e.preventDefault(); // 阻止表单的默认提交行为
  var response = grecaptcha.getResponse(widgetId);
  // ... 后续的 AJAX 请求
});

e.preventDefault() 方法用于阻止表单的默认提交行为，从而避免页面重载。

步骤 3：使用 AJAX 发送 reCAPTCHA 响应到服务器

使用 AJAX 将 reCAPTCHA 的响应发送到服务器进行验证。

$('form').submit(function(e) {
  e.preventDefault();
  var response = grecaptcha.getResponse(widgetId);
  $.ajax({
    url: 'validate_captcha.php', // 替换为你的验证脚本 URL
    type: 'POST',
    data: {'g-recaptcha-response': response},
    success: function(data) {
      alert(data); // 根据服务器返回的数据进行处理
      if(data == 'success') {
        // 在这里执行注册用户的逻辑
        // registerUser(name, email, password);  // 示例函数，需要自行实现
        alert("reCAPTCHA验证成功，可以进行后续操作");
      } else {
        alert("reCAPTCHA验证失败，请重试");
      }
    },
    error: function(error) {
      alert(error); // 处理错误
    }
  });
});

请务必将 validate_captcha.php 替换为你实际的服务器端验证脚本 URL。

步骤 4：服务器端验证 reCAPTCHA 响应

在服务器端，使用以下 PHP 代码验证 reCAPTCHA 的响应。

 'your_secret_key', // 替换为你的密钥
        'response' => $userResponse
    );
    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);

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

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

  if ($result['success']) {
      echo 'success';

  } else {
     echo 'error';
  }
}
?>

请务必将 your_secret_key 替换为你实际的 reCAPTCHA 密钥。

注意事项

• 确保已在 Google reCAPTCHA 网站上注册你的域名，并获取了站点密钥和密钥。
• 在生产环境中，应该对服务器端验证脚本进行更严格的错误处理和安全措施。
• registerUser 函数仅为示例，你需要根据你的实际需求实现该函数。
• 确保引入 jQuery 库，因为示例代码使用了 jQuery 的 AJAX 功能。

总结

通过以上步骤，我们可以使用 JavaScript 获取 reCAPTCHA 的响应，并使用 AJAX 将其发送到服务器进行验证，从而避免页面刷新，提升用户体验。这种方法可以有效地解决 reCAPTCHA 表单提交后页面重载的问题。