Thymeleaf邮件模板表单提交时阻止页面跳转的问题

问题说明 #

我有一个运行正常的Spring Boot应用及REST API，项目里有个发送邮件通知的API，用Thymeleaf生成HTML邮件模板。需求是在邮件里加「是/否」按钮，用户点击后调用对应的REST API。

当前实现的问题是：点击按钮后会跳转到空白URL页面，只有刷新时才会调用REST API。我希望点击按钮直接调用API且不跳转页面，试了多个StackOverflow方案都没生效。

现有代码问题分析 #

看了你提供的代码，主要问题出在JavaScript的语法错误和逻辑顺序上，同时还要考虑邮件客户端对JS的限制：

1. 第一个脚本中：url值没加引号、type: get应该是字符串'GET'，且未阻止表单默认提交行为
2. 修改后的脚本中：.get()前缺少$符号，且event.preventDefault()放在请求之后，无法阻止页面跳转
3. 关键限制：多数邮件客户端会禁用JavaScript，或者对跨域请求有严格限制，纯JS方案可能在很多客户端无法生效

修复方案 #

方案1：修复JavaScript代码（兼容支持JS的邮件客户端） #

使用原生JavaScript（避免依赖jQuery，减少邮件客户端兼容性问题），正确阻止表单默认行为并发送请求：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.language}" lang="en">
<head>
    <title th:text="#{email.notification.title}">Notification Alert</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<script>
document.getElementById('decline-form').addEventListener('submit', function(event) {
    // 先阻止表单默认提交行为
    event.preventDefault();
    
    // 发送GET请求
    fetch('http://localhost:8082/decline')
        .then(response => {
            if (response.ok) {
                console.log('请求成功');
                // 可以在这里提示用户操作成功，比如修改按钮文本
                document.getElementById('submit-decline').value = '已拒绝';
                document.getElementById('submit-decline').disabled = true;
            } else {
                console.error('请求失败');
            }
        })
        .catch(error => {
            console.error('请求出错:', error);
        });
});
</script>

<body>
    <p>
        Hi Team,<br>
        Below are the changes found in the table
    </p>

    <table border="1" style="width:750px">
        <tr>
            <td><b>File</b></td>
            <td><b>Entity</b></td>
            <td><b>Client</b></td>
            <td><b>Timestamp</b></td>
            <td><b>Changes</b></td>
        </tr>
        <tr>
            <td th:text="${notification.fileName}"></td>
            <td th:text="${notification.entity}"></td>
            <td th:text="${notification.client}"></td>
            <td th:text="${notification.timestamp}"></td>
            <td th:text="${notification.changes}"></td>
        </tr>
    </table>

    <p>
        Would you like to approve the changes -
    </p>

    <form id="decline-form">
        <input id="submit-decline" type="submit" value="No"/>
    </form>

    <p>
        <span>Regards, </span>
        <br/>
        <em>Team.</em>
    </p>

</body>
</html>

方案2：无JavaScript兼容方案（适配所有邮件客户端） #

由于很多邮件客户端禁用JS，更可靠的方案是用链接模拟按钮，点击后跳转到一个专门的处理页面，处理完请求后提示用户操作结果：

1. 首先新增一个处理页面的Controller：

@RestController
@Slf4j
public class EmailActionController {

    private final EmailDeclineService emailDeclineService;
    private final EmailApproveService emailApproveService;

    public EmailActionController(EmailDeclineService emailDeclineService, EmailApproveService emailApproveService) {
        this.emailDeclineService = emailDeclineService;
        this.emailApproveService = emailApproveService;
    }

    @GetMapping("/handle-decline")
    public String handleDecline(Model model) {
        // 执行拒绝逻辑
        emailDeclineService.decline();
        model.addAttribute("message", "已成功拒绝变更");
        return "action-result";
    }

    @GetMapping("/handle-approve")
    public String handleApprove(Model model) {
        // 执行批准逻辑
        emailApproveService.approve();
        model.addAttribute("message", "已成功批准变更");
        return "action-result";
    }
}

2. 创建一个简单的结果页面action-result.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>操作结果</title>
    <script>
        // 3秒后自动关闭页面（部分浏览器支持）
        setTimeout(() => window.close(), 3000);
    </script>
</head>
<body>
    <h2 th:text="${message}"></h2>
    <p>页面将在3秒后自动关闭，或手动关闭此页面。</p>
</body>
</html>

3. 修改邮件模板中的按钮为链接：

<!-- 拒绝按钮 -->
<a href="http://localhost:8082/handle-decline" style="text-decoration:none; padding:8px 16px; background:#dc3545; color:white; border-radius:4px;">No</a>

<!-- 批准按钮 -->
<a href="http://localhost:8082/handle-approve" style="text-decoration:none; padding:8px 16px; background:#28a745; color:white; border-radius:4px; margin-left:10px;">Yes</a>

关键注意事项 #

• 邮件客户端JS限制：Gmail、Outlook等主流客户端默认禁用JavaScript，因此方案2的无JS方案更通用
• 跨域问题：如果API部署在不同域名下，需要配置CORS允许邮件客户端所在域名的请求
• 安全性：建议在请求中加入验证参数（比如唯一token），防止恶意重复调用API

内容的提问来源于stack exchange，提问作者anonymous