Thymeleaf：单击提交按钮后显示成功消息

Posted 2023-02-26

【中文标题】Thymeleaf：单击提交按钮后显示成功消息

【英文标题】：Thymeleaf: Show a success message after clicking on submit button

【发布时间】：2018-03-26 10:56:36

【问题描述】：

我有一个spring-boot 应用程序，带有Thymeleaf。我有非常基本的场景。有一个表单，当用户点击提交按钮时，表单数据应该被发送到控制器，但是在同一页面中应该会显示一条成功消息。

表格很简单：

<form th:action="@/suggest-event"  method="post">
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
<div th:switch="$message">
    <div th:case="'Success'" class="alert alert-success">
        <strong>Success!</strong> Operation performed successfully.
    </div>
    <div th:case="'Failed'" class="alert alert-danger">
        <strong>Failure!</strong> Operation failed. Please try again 
    </div>
</div>

要加载表单，我在控制器中使用了以下方法：

@GetMapping("/suggest-event")
public String suggestEvent(@RequestParam(value = "message", required = false) String message) 

    model.addAttribute("message",message);
    return "/suggested-event/suggestEvent";

然后是回复post请求的方法：

@PostMapping("/suggest-event")
public String receiveSuggestedEvent( RedirectAttributes redirectAttributes) 

    redirectAttributes.addAttribute("message", "Success");
    return "redirect:/suggest-event";

问题是，成功消息始终存在（当页面第一次加载时，在我提交表单之前）。我该如何解决？

【参考方案1】：

你可以稍微修改一下代码：

@GetMapping("/suggest-event")
public String suggestEvent() 
    return "/suggested-event/suggestEvent";
 

@PostMapping("/suggest-event")
public String receiveSuggestedEvent(BindingResult result, RedirectAttributes redirectAttributes) 
    redirectAttributes.addFlashAttribute("message", "Failed");
    redirectAttributes.addFlashAttribute("alertClass", "alert-danger");
    if (result.hasErrors()) 
        return "redirect:/suggest-event";
    
    redirectAttributes.addFlashAttribute("message", "Success");
    redirectAttributes.addFlashAttribute("alertClass", "alert-success");
    return "redirect:/suggest-event";

我在 html 中显示消息的解决方案：

<div th:if="$message" th:text="$message" th:class="$'alert ' + alertClass"/>

但底线是替换 addFlashAttribute 而不是 addAttribute 并从 @GetMapping 中删除消息。