Thymeleaf 邮件模板中阻止表单提交重定向并异步调用 REST API

在 thymeleaf 生成的 html 邮件模板中，点击表单按钮默认会触发页面跳转；需通过 javascript（ajax）拦截提交行为，异步调用后端 rest 接口，避免重定向和空白页问题。 在 thymeleaf 生成的 html 邮件模板中，点击表单按钮默认会触发页面跳转；需通过 javascript（ajax）拦截提交行为，异步调用后端 rest 接口，避免重定向和空白页问题。 在电子邮件场景中，用户点击「Yes/No」按钮本质上是与外部系统的一次轻量交互—— 不应加载新页面，也不应依赖浏览器刷新 。但原生 HTML 表单

的 submit 事件默认会导航至 action 地址，这在邮件客户端（尤其是 Webmail 如 Gmail、Outlook Web）中不仅无法正常执行 JS，更会导致链接跳转失败或显示空白页。因此，必须彻底禁用默认提交行为，并改用显式 AJAX 请求。 ✅ 正确实现方式：绑定表单 submit 事件 + event.preventDefault() 以下为修复后的完整 Thymeleaf 模板片段（关键修改已加注释）：

复制

Would you like to approve the changes?

No

Regards,
Team.

⚠️ 关键注意事项（务必阅读） 邮件客户端 JS 支持极差 ：Gmail、Outlook.com、Apple Mail 等主流客户端 默认禁用或剥离所有