Spring Boot/Thymeleaf中提交Bootstrap模态框表单后展示消息

我刚接触Thymeleaf结合Bootstrap模态框的开发，目前遇到一个问题：在Spring Boot项目中，产品列表页面以表格展示产品，每个产品对应一个更新按钮，点击可打开Bootstrap模态框表单。表单提交后后端完成校验与更新，通过redirectAttributes传递消息到产品页面，但消息仅出现在URL中，页面上的消息容器并未显示内容。

页面展示消息的代码：

<div th:if="${msg}" th:text="${msg}">message</div>

控制器传递消息的代码：

String msg = "Product updated";
redirectAttributes.addAttribute("msg", msg);
return "redirect:/product/" + product.getId();

模态框提交后会自动关闭，但消息始终无法正常显示，想请教如何让消息在页面或弹窗中正确展示？是否可以通过重新加载页面解决这个问题？

解决方法 #

1. 改用Flash属性传递消息（推荐方案） #

你当前使用的addAttribute会将参数直接拼接到URL上，要实现重定向后页面能获取到消息，应该使用addFlashAttribute，它会把数据存入session，重定向后自动清除，不会暴露在URL中：

String msg = "Product updated";
redirectAttributes.addFlashAttribute("msg", msg);
return "redirect:/product/" + product.getId();

这样页面原有的Thymeleaf代码不需要修改，就能正常读取到msg并展示。

2. 适配URL参数的页面接收逻辑（兼容原有传参方式） #

如果坚持使用addAttribute传递参数，需要修改页面代码，从请求参数中读取消息，而非模型属性：

<div th:if="${param.msg}" th:text="${param.msg}">message</div>

${param.msg}用于获取URL中的请求参数，能直接读取到URL里的消息，但这种方式消息会暴露在地址栏，不够优雅。

3. 用AJAX提交+前端弹窗展示（无刷新方案） #

如果不想刷新页面，可以改用AJAX提交表单，后端返回JSON格式的消息，前端收到后用弹窗展示，体验更流畅：

• 前端AJAX提交代码：

$("#updateForm").submit(function(e) {
    e.preventDefault();
    $.ajax({
        url: $(this).attr("action"),
        type: "POST",
        data: $(this).serialize(),
        success: function(response) {
            $("#updateModal").modal("hide");
            // 用Bootstrap弹窗展示消息
            $("#msgModal .modal-body").text(response.msg);
            $("#msgModal").modal("show");
            // 可选：刷新产品列表数据
            location.reload();
        }
    });
});

• 后端控制器返回JSON：

@PostMapping("/product/{id}")
@ResponseBody
public Map<String, String> updateProduct(@PathVariable Long id, @ModelAttribute Product product) {
    // 执行产品更新逻辑
    productService.update(product);
    Map<String, String> response = new HashMap<>();
    response.put("msg", "Product updated");
    return response;
}

关于页面重新加载 #

重新加载页面确实可以解决问题，但前提是消息已经正确传递到页面（比如用Flash属性或URL参数）。不过整页刷新的用户体验不如AJAX方案，除非业务场景必须刷新整个页面。

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