Spring MVC+Thymeleaf提交数据后HTML表格不显示问题排查

问题场景 #

在Spring MVC + Thymeleaf项目中，已在HTML中使用Thymeleaf对象与变量表达式，编写了@GetMapping和@PostMapping方法，且有独立POJO类。通过form.html提交数据后页面跳转至grades.html，但数据未显示。

相关代码 #

Controller 代码 #

@Controller
public class piperscontroller {

  List<piedpiper> addGrades= new ArrayList<>();

  @GetMapping("/")
  public String submitForm(Model model){
    model.addAttribute("grades",new piedpiper());
    return "form";
  }

  @PostMapping("/handleSubmit")
  public String grademeth(piedpiper grades){
      addGrades.add(grades);
      return "redirect:/grades";
  }

  @GetMapping("/grades")
  public String finalButton(Model model){
      model.addAttribute("grades",addGrades);
      return "grades";
  }
}

form.html 代码 #

<!DOCTYPE HTML>
<html>
  <head>
    <title>Form</title>
    <link th:href="@{/css/form.css} " rel="stylesheet">
  </head>    
  <body>
    <div class="topnav">
      <a>Form</a>
      <a>Grades</a>
    </div>   
    <div class="container">
      <h2> Grade Portal </h2>
      <form method="post" th:object="${grades}" th:action="@{/handleSubmit}"> 
        <input type="text" placeholder="Name" th:field="*{name}" >
        <input type="text" placeholder="Score"  th:field="*{score}">  
        <input type="text" placeholder="Subject"  th:field="*{subject}">
        <br><br>
        <input type="submit" value="Submit">
      </form>  
    </div>
</body>
</html>

可能的原因分析 #

• POJO类未配置正确的getter/setter方法：piedpiper类的name、score、subject属性必须有对应的getter和setter方法，否则Spring MVC无法完成表单数据到对象的绑定，添加到列表的对象属性为空，最终页面无数据。另外，类名和属性名建议遵循Java驼峰命名规范（如PiedPiper而非piedpiper），避免潜在的映射异常。
• grades.html未正确遍历列表数据：目前未提供grades.html的代码，若该页面未使用Thymeleaf的th:each循环遍历grades列表，或表达式书写错误（比如误将列表当作单个对象处理），就无法渲染数据。正确的遍历示例如下：

  <div th:each="grade : ${grades}">
    <p>姓名: <span th:text="${grade.name}"></span></p>
    <p>分数: <span th:text="${grade.score}"></span></p>
    <p>科目: <span th:text="${grade.subject}"></span></p>
  </div>
  

• Controller列表作用域异常：默认Spring MVC的Controller是单例模式，addGrades作为成员变量会被所有请求共享。但如果手动给Controller配置了@Scope("prototype")，每次请求都会创建新的Controller实例，之前提交的数据会丢失，导致grades页面拿到的是空列表。
• 表单数据绑定失败：检查表单字段名与POJO属性名是否完全匹配（包括大小写），比如th:field="*{name}"必须对应POJO的name属性。若score是数字类型（如Integer），但表单输入非合法数字，会导致绑定失败，对象属性为null，页面显示空值。
• 数据未成功添加到列表：若前面的表单绑定失败，grades对象的属性为空，即使添加到addGrades列表，页面渲染时也看不到有效数据。可以在grademeth方法中添加日志打印，确认grades对象的属性值是否正确。

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