Thymeleaf:在表单提交时更新表格
Thymeleaf:在表单提交时更新表格
提问于 2019-05-23 01:11:53
我有一个视图，其中有一个用于创建新练习对象的窗体，以及一个用于显示所有练习的表。现在，我希望使用新创建的练习自动刷新表格。当前它将该表显示为空，直到我再次手动转到localhost:8080/exercise。
这是我的控制器：
@Controller
public class ExerciseController {
@Autowired
private ExerciseService exerciseService;
@Autowired
private ModelMapper modelMapper;
@GetMapping("/exercise")
public String exerciseView(final Model model) {
List<Exercise> exerciseList = exerciseService.getAllExercises();
model.addAttribute("exerciseDTO", new ExerciseDTO());
model.addAttribute("title", "Create an Exercise");
model.addAttribute("exercises", exerciseList);
return "exercise";
}
@PostMapping("/exercise")
public String createExercise(@ModelAttribute final ExerciseDTO exerciseDto) {
final Exercise exercise = this.modelMapper.map(exerciseDto, Exercise.class);
this.exerciseService.createExercise(exercise);
return "exercise";
}
}和我的胸腺叶模板：
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template :: head"></head>
<body>
<header th:replace="template :: navbar"></header>
<h1>Form</h1>
<form action="#" th:action="@{/exercise}" th:object="${exerciseDTO}" method="post">
<p>Name: <input type="text" th:field="*{name}" /></p>
<p>Description: <input type="text" th:field="*{description}" /></p>
<p>Exercise type:
<select th:field="*{type}" id="typeSelector">
<option th:each="type : ${T(com.nsterdt.routinierbackend.data.enums.ExerciseType).values()}"
th:value="${type}" th:text="${type.displayName}">
</option>
</select>
</p>
<p id="bpmRow">BPM: <input type="number" th:field="*{bpm}" id="bpmInput" /></p>
<p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</form>
<br>
<table>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>BPM</th>
</tr>
<tr th:each="exercise : ${exercises}">
<td th:text="${exercise.name}"></td>
<td th:text="${exercise.description}"></td>
<td th:text="${exercise.type}"></td>
<td th:text="${exercise.bpm}"></td>
</tr>
</table>
</body>
</html>现在，我认为返回"exercise“的createExercise方法将调用exerciseView方法，从而调用exerciseService.getAllExercises()。有没有办法实现这一功能？或者有没有更好的方法，不用重新加载整个页面？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56261891
复制相关文章
相似问题
腾讯云开发者
