解决 reCAPTCHA 表单提交后页面重载问题：JavaScript 教程-php教程-PHP中文网

解决 reCAPTCHA 表单提交后页面重载问题：JavaScript 教程

花韻仙語

发布： 2025-07-19 17:36:01

原创

422人浏览过

解决 recaptcha 表单提交后页面重载问题：javascript 教程

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

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

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

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

立即学习“Java免费学习笔记（深入）”；

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

登录后复制

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

<script type="text/javascript">
  var verifyCallBack = function(response) {
    alert(response);
  };
  var widgetId;
  var onloadCallback = function() {
    widgetId = grecaptcha.render('recaptcha', {
      'sitekey' : 'your_site_key', // 替换为你的站点密钥
      'theme' : 'light'
    });
  }
</script>

<form>
  <div id="recaptcha"></div>
  <input type="submit" name="submit" value="submit">
</form>

登录后复制

请务必将 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() 方法用于阻止表单的默认提交行为，从而避免页面重载。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

步骤 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 的响应。

<?php
if (isset($_POST['g-recaptcha-response'])) {
  function CheckCaptcha($userResponse) {
    $fields_string = '';
    $fields = array(
        'secret' => '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 密钥。

注意事项