如何修复 AJAX 联系表单跳转到 send.php 页面的问题

本文详解为何 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 解析。

? 排查技巧

1. 检查浏览器控制台：若出现 Uncaught TypeError: grecaptcha.getResponse is not a function，说明 reCAPTCHA SDK 未加载完成，可在 submit 处理前加 if (typeof grecaptcha === 'undefined') { ... } 防御；
2. 验证网络请求：在 DevTools 的 Network 标签中确认请求是否为 XHR（而非 document），且响应状态码为 200；
3. 简化测试：临时移除 reCAPTCHA 相关代码，验证基础 AJAX 是否正常工作，再逐步恢复。

通过将 reCAPTCHA 控件与表单提交解耦，并由 JavaScript 主动管理验证流程，你就能彻底掌控表单行为——event.preventDefault() 将真正生效，消息显示在 #form-messages 中，用户体验丝滑无跳转。

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