本文详解为何 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" 绑定在
✅ 正确做法：解耦 reCAPTCHA 与提交逻辑
将 reCAPTCHA 从按钮移至独立容器（如
），并显式在 AJAX 提交前验证 token，确保控制权完全掌握在你的 JS 逻辑中：
✅ 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免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
