防止表单重复提交的 JS 方法

本文旨在解决在使用 reCAPTCHA 的表单提交时，如何防止页面重载并同时发送 POST 请求的问题。通过利用 reCAPTCHA 提供的 JavaScript API 和 AJAX 技术，我们可以异步地验证 reCAPTCHA，并在成功验证后执行其他操作，从而提升用户体验。

实现原理

核心思路是：

1. 阻止表单的默认提交行为，防止页面重载。
2. 使用 reCAPTCHA 提供的 JavaScript API 获取 reCAPTCHA 的响应值。
3. 使用 AJAX 将 reCAPTCHA 的响应值发送到服务器进行验证。
4. 根据服务器返回的验证结果，执行相应的操作。

具体步骤

1. 引入 reCAPTCHA API

首先，需要在 HTML 页面中引入 reCAPTCHA API。确保在 URL 中包含 onload 和 render 参数，以便使用显式渲染方式。

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

2. 渲染 reCAPTCHA

使用 grecaptcha.render 函数渲染 reCAPTCHA。

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

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

请务必将 'your_site_key' 替换为你的 reCAPTCHA site key。

3. 阻止表单提交并发送 AJAX 请求

使用 JavaScript 监听表单的提交事件，阻止默认行为，并使用 AJAX 发送 reCAPTCHA 响应到服务器。

$('form').submit(function(e) {
  e.preventDefault();
  var response = grecaptcha.getResponse(widgetId);
  $.ajax({
    url: 'validate_captcha.php', // 替换为你的验证脚本路径
    type: 'POST',
    data: {'g-recaptcha-response': response},
    success: function(data) {
      alert(data);
      if(data == 'success') {
        // 验证成功，执行其他操作，例如注册用户
        registerUser(name, email, password); // 示例函数，需要根据你的实际情况实现
      } else {
        // 验证失败，显示错误信息
        alert('reCAPTCHA 验证失败');
      }
    },
    error: function(error) {
      alert(error);
    }
  });
});

4. 服务器端验证

在服务器端（例如 validate_captcha.php），使用 secret key 验证 reCAPTCHA 响应。

<?php
if (isset($_POST['g-recaptcha-response'])) {
  function CheckCaptcha($userResponse) {
    $fields_string = '';
    $fields = array(
        'secret' => 'your_secret_key', // 替换为你的 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 secret key。

注意事项

• 确保引入 jQuery 库，因为示例代码使用了 jQuery 的 AJAX 功能。
• 替换示例代码中的 your_site_key 和 your_secret_key 为你自己的 reCAPTCHA 密钥。
• 服务器端的验证脚本需要能够处理 POST 请求，并返回验证结果。
• registerUser 函数是一个示例，你需要根据你的实际需求实现。
• 错误处理部分需要根据实际情况进行完善，例如显示更友好的错误提示。
• 为了安全起见，请务必在服务器端验证 reCAPTCHA 响应。

总结

通过以上步骤，我们可以有效地防止表单重载，并使用 AJAX 异步验证 reCAPTCHA。这种方法可以提升用户体验，并确保数据的安全性和完整性。记住，安全永远是第一位的，务必在服务器端进行 reCAPTCHA 验证。