本文讲解如何在用户点击提交按钮时，通过 jQuery 动态修改表单的 action 属性并触发真实提交，解决因 event.preventDefault() 导致表单不提交、页面仅刷新的问题。
本文讲解如何在用户点击提交按钮时，通过 jquery 动态修改表单的 `action` 属性并触发真实提交，解决因 `event.preventdefault()` 导致表单不提交、页面仅刷新的问题。
在使用 jQuery 处理表单提交时，一个常见误区是：在 submit 事件中调用 event.preventDefault() 后仅修改 action 属性，却未显式调用 .submit() 触发原生提交流程——这会导致表单失去默认行为，且后续手动调用 $('#form').submit() 在已阻止的 submit 事件中可能被忽略或失效。
正确的做法是将逻辑从 submit 事件移至按钮的 click 事件，这样既能提前设置动态 action，又能主动触发表单提交，避免事件循环与状态冲突。
以下是推荐实现方案：
$('#checkout-button').on('click', function(event) {
event.preventDefault(); // 阻止按钮默认行为（防止重复提交或跳转）
// ✅ 安全获取当前登录用户邮箱（示例：从 PHP 注入或 JS 变量中读取）
const userEmail = 'user@example.com'; // 实际项目中应通过 wp_localize_script() 注入
const endpoint = `/wp-json/api/checkout4/${encodeURIComponent(userEmail)}`;
// 动态设置表单 action
$('#firebase-checkout4').attr('action', endpoint);
// ✅ 显式触发原生表单提交（此时 action 已生效）
$('#firebase-checkout4')[0].submit(); // 推荐使用原生 DOM 方法，更可靠
});
? 关键注意事项：
❌ 不要在
submit事件中仅设action而不调用.submit()；event.preventDefault()已中断流程，不会自动恢复。✅ 使用
$('#form')[0].submit()（原生 DOM 提交）而非$('#form').submit()（jQuery 触发事件），避免再次进入已被阻止的 submit 处理器。
jQuery 1.12.4下载jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
-
? 邮箱等敏感参数切勿前端硬编码或直接拼接 URL。WordPress 中应通过
wp_localize_script()安全传递当前用户信息：// PHP 中（如在 enqueue 时） wp_localize_script('your-script-handle', 'wpUser', [ 'email' => is_user_logged_in() ? wp_get_current_user()->user_email : '' ]);对应 JS 中使用
wpUser.email替代硬编码邮箱。 ?️ 若需进一步控制提交（如添加加载状态、校验或 AJAX），建议改用
fetch()或jQuery.ajax()手动发送 POST 请求，完全绕过表单原生提交机制，获得更高灵活性与错误处理能力。
综上，将动态 action 设置与提交动作解耦到按钮点击事件，并使用原生提交方式，是兼顾兼容性、可维护性与安全性的最佳实践。
