本文详解为何 event.preventDefault() 失效导致表单提交后跳转至 send.php，核心原因在于 invisible reCAPTCHA 绑定在 submit 按钮上干扰了事件拦截，并提供完整可运行的修复方案（含 HTML、JavaScript 和 PHP 注意事项）。
本文详解为何 `event.preventdefault()` 失效导致表单提交后跳转至 send.php，核心原因在于 invisible recaptcha 绑定在 submit 按钮上干扰了事件拦截，并提供完整可运行的修复方案（含 html、javascript 和 php 注意事项）。
AJAX 表单“不留在当前页”是前端开发中常见却易被忽视的问题。表面看 event.preventDefault() 已调用，但页面仍跳转至 send.php，根本原因并非 JavaScript 未执行，而是 事件拦截时机被第三方脚本破坏——本例中，Google Invisible reCAPTCHA 将 data-callback="onSubmit" 绑定在 <button> 上，导致其内部自动触发原生表单提交，绕过了你绑定在 <form> 上的 submit 事件监听器。
✅ 正确做法：解耦 reCAPTCHA 与提交逻辑
将 reCAPTCHA 从按钮移至独立容器（如 <div id="recaptcha">），并显式在 AJAX 提交前验证 token，确保控制权完全掌握在你的 JS 逻辑中：
<form id="ajax-contact" method="post" action="send.php">
<!-- 其他字段保持不变 -->
<div class="field">
<label for="name">Name</label>
<input type="text" id="name" name="name" autocomplete="name" required>
</div>
<div class="field">
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email" required>
</div>
<div class="field">
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
</div>
<!-- ✅ 关键修改：reCAPTCHA 容器脱离按钮 -->
<div id="recaptcha" class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
<div id="form-messages"></div>
<div class="field">
<button type="submit" class="button">Send</button>
</div>
</form>✅ JavaScript：主动获取 token 并注入请求
修改 contact.js，在 AJAX 发送前手动获取 reCAPTCHA token，并通过 data 字段传入 PHP：
$(function() {
const form = $('#ajax-contact');
const formMessages = $('#form-messages');
form.submit(function(event) {
event.preventDefault(); // ✅ 现在能真正阻止跳转
// ✅ 获取 reCAPTCHA token（需确保 reCAPTCHA 已加载）
const captchaToken = grecaptcha.getResponse();
if (!captchaToken) {
formMessages.removeClass('success').addClass('error')
.text('Please complete the reCAPTCHA verification.');
return;
}
const formData = form.serialize() + '&g-recaptcha-response=' + encodeURIComponent(captchaToken);
$.ajax({
type: 'POST',
url: form.attr('action'),
data: formData, // ✅ token 已包含在序列化数据中
dataType: 'text' // 显式声明响应类型，避免解析错误
})
.done(function(response) {
formMessages.removeClass('error').addClass('success').text(response);
form[0].reset(); // 更可靠的清空方式
})
.fail(function(xhr) {
const errorMsg = xhr.responseText || 'Oops! An error occurred.';
formMessages.removeClass('success').addClass('error').text(errorMsg);
});
});
});⚠️ PHP 端注意事项（send.php）
- 无需改动核心逻辑，但需确保 $_POST['g-recaptcha-response'] 能被正确接收（当前代码已支持）；
- 强烈建议添加 CSRF 保护（如生成并校验一次性 token），防止跨站伪造提交；
- mail() 函数在生产环境可靠性低，推荐改用 PHPMailer 或 SMTP 服务；
- 响应时务必使用 exit; 终止脚本，避免意外输出干扰 AJAX 解析。
? 排查技巧
- 检查浏览器控制台：若出现 Uncaught TypeError: grecaptcha.getResponse is not a function，说明 reCAPTCHA SDK 未加载完成，可在 submit 处理前加 if (typeof grecaptcha === 'undefined') { ... } 防御；
- 验证网络请求：在 DevTools 的 Network 标签中确认请求是否为 XHR（而非 document），且响应状态码为 200；
- 简化测试：临时移除 reCAPTCHA 相关代码，验证基础 AJAX 是否正常工作，再逐步恢复。
通过将 reCAPTCHA 控件与表单提交解耦，并由 JavaScript 主动管理验证流程，你就能彻底掌控表单行为——event.preventDefault() 将真正生效，消息显示在 #form-messages 中，用户体验丝滑无跳转。
立即学习“PHP免费学习笔记（深入）”；
