SpringBoot JPA模态框更新后如何刷新同ProjectId过滤的表格数据

更新后任务列表为空的核心原因有两点：

• /updateAssignment 接口只执行了数据库更新操作，返回project-assignments视图前，没有向Model中注入当前项目对应的任务列表、页头数据，Thymeleaf模板渲染时找不到assignments变量，自然展示为空
• 整个更新链路没有传递当前操作所属的projectId，接口无法定位需要加载哪个项目下的任务数据

1. 改造后端更新接口 #

不要在更新接口里直接返回视图，采用PRG（Post-Redirect-Get）模式重定向到已有的任务列表查询接口，直接复用现成的列表加载逻辑，不用重复写数据封装代码，从根源避免漏传模型参数的问题：

// 更新操作用POST请求，不要用GET，避免误触发、重复提交问题
@RequestMapping(value = "/updateAssignment", method = RequestMethod.POST)
public String updateAssignment(Long id, Double rate, Long projectId){
    // 执行原有更新逻辑
    this.assignmentService.updateAssignmentById(id, rate);
    // 重定向到按项目ID查任务的接口，自动携带projectId参数
    return "redirect:/getAssignmentsByProjectId?id=" + projectId;
}

重定向后会自动走已写好的getAssignmentsById逻辑，自动往Model里注入header、assignments数据，页面渲染就不会出现空列表问题。

2. 前端补充projectId参数传递 #

提交更新请求时必须把当前查看的项目ID传给后端，根据提交方式选对应实现即可：

• 普通表单提交（非异步）：在模态框的表单内加隐藏域，直接取当前页面请求参数里的项目ID，提交时会自动携带

  <input type="hidden" name="projectId" th:value="${param.id}" />
  

  这里${param.id}取的就是加载project-assignments页面时传入的项目ID，不需要额外写JS存值。
• JS异步提交：提前从当前页面URL中解析出id参数（即projectId），和任务ID、费率参数一起传给更新接口，请求成功后直接跳转到对应项目的任务列表地址：

  // 从当前URL解析projectId
  const projectId = new URLSearchParams(window.location.search).get('id');
  // 提交请求时携带projectId，请求成功后跳转回对应任务列表
  window.location.href = `/getAssignmentsByProjectId?id=${projectId}`;
  

• 所有涉及数据修改的接口（新增、更新、删除）都不要用GET请求方法，避免被爬虫、浏览器预加载误触发，也能减少表单重复提交问题
• 同一视图的数据加载逻辑统一收敛到对应的列表查询接口，其他操作完成后直接重定向到该接口，不要在每个修改接口里重复写模型数据封装逻辑，减少冗余代码的同时避免漏传参数导致的页面异常。

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