模态窗口点击删除按钮后后端删除接口未触发的问题求助

我现在在做一个后台用户管理页面，页面里的用户列表每行都有编辑和删除按钮，点击后会唤起同一个Bootstrap模态窗口，通过JS根据操作类型（edit/delete）切换表单提交地址、按钮显示状态。目前编辑功能完全正常，但删除功能遇到了问题：点击删除按钮提交后，浏览器地址栏明明显示已经请求了http://localhost:8088/deleteUser，但后端的删除方法根本没进入，我加的控制台打印语句连影子都没看到。

相关代码片段 #

1. 模态窗口的Thymeleaf片段

这是定义模态窗口的HTML片段，通过Thymeleaf的fragment复用：

<div class="modal fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true" th:fragment="userModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <!-- 标题根据操作类型切换 -->
                <h5 class="modal-title" id="userModalLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form th:object="${user}" method="post">
                    <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />

                    ... 其他表单字段代码省略 ...
                
                    <footer class="footer">
                            <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary btn-sm">Edit</button>
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                    </footer>
                </form>
            </div>
        </div>
    </div>
</div>

2. 控制模态窗口的JS脚本

用来设置表单提交地址、切换按钮显示状态的前端脚本：

<script>
    var saveUserUrl = '[[@{/saveUser}]]';
    var deleteUserUrl = '[[@{/deleteUser}]]';

    $('#userModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var userId = button.data('user-id');
        var operation = button.data('operation');

        var modal = $(this);
        modal.find('.modal-body #userId').val(userId);

        ... 其他逻辑代码省略 ...

        var form = modal.find('.modal-body form');
        if (operation === 'edit') {
            form.attr('action', saveUserUrl);
        } else {
            // 为删除操作设置表单提交地址
            form.attr('action', deleteUserUrl);
        }

        ... 其他逻辑代码省略 ...

        var editButton = modal.find('.modal-body .btn-primary');
        var deleteButton = modal.find('.modal-body .btn-danger');

        if (operation === 'edit') {
            editButton.show();
            deleteButton.hide();
        } else {
            editButton.hide();
            deleteButton.show();
        }

        ... 其他逻辑代码省略 ...
    });

</script>

3. 主页面引入模态窗口的方式

主页面通过Thymeleaf的replace引入模态窗口片段：

<div th:replace="~{user_modal :: userModal}"></div>

4. 正常工作的编辑接口

点击编辑按钮提交后，这个Controller方法能正常进入，功能完全正常：

@PostMapping("/saveUser")
public String saveUser(@ModelAttribute("user") User user,
                       @RequestParam(value = "roles", required = false) List<Long> roleIds,
                       @RequestParam(value = "newPassword", required = false) String newPassword) {

    ... 业务逻辑代码省略 ...
}

5. 无法触发的删除接口

我最初写的删除接口，点击删除按钮后完全没进入：

@PostMapping("/deleteUser")
public String deleteUser(User user) {
    // 调试用的打印，从未输出过
    System.out.println("deleteUser: " + user.getId());
    userService.delete(user.getId());

    return "redirect:/admin-bootstrap";
}

后来我尝试修改接口，直接接收userId参数，甚至手动在地址栏拼http://localhost:8088/deleteUser?userId=100测试，结果还是没进入：

@PostMapping("/deleteUser")
public String deleteUser(@RequestParam("userId") Long id) {
    System.out.println("deleteUser: " + id);
    userService.delete(id);

    return "redirect:/admin-bootstrap";
}

目前的现象总结 #

1. 前端状态正常：点击删除按钮后，模态窗口标题切换正确，编辑按钮隐藏、删除按钮显示，表单提交地址也设置成了deleteUserUrl
2. 浏览器地址栏显示请求了http://localhost:8088/deleteUser，但后端无任何反应，没有报错也没有调试输出
3. 编辑功能完全正常，说明Spring MVC、Thymeleaf的配置应该没问题

有没有大佬能帮我分析下，为什么删除接口就是触发不了？可能的排查方向有哪些？

备注：内容来源于stack exchange，提问作者Виктор Гловлюк