本文旨在解决在使用 reCAPTCHA 的表单提交时，如何防止页面重载并同时发送 POST 请求的问题。通过利用 reCAPTCHA 提供的 JavaScript API 和 AJAX 技术，我们可以异步地验证 reCAPTCHA，并在成功验证后执行其他操作，从而提升用户体验。
实现原理
核心思路是：
- 阻止表单的默认提交行为，防止页面重载。
- 使用 reCAPTCHA 提供的 JavaScript API 获取 reCAPTCHA 的响应值。
- 使用 AJAX 将 reCAPTCHA 的响应值发送到服务器进行验证。
- 根据服务器返回的验证结果，执行相应的操作。
具体步骤
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。
立即学习“Java免费学习笔记（深入）”；
<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 验证。
