gpt4 book ai didi

java - Thymeleaf:更新表单提交表

转载 作者:行者123 更新时间:2023-12-02 09:51:56 25 4
gpt4 key购买 nike

我有一个 View ,其中有一个用于创建新练习对象的表单,以及一个用于显示所有练习的表格。现在我希望表格自动刷新新创建的练习。目前,它将表显示为空,直到我再次手动转到 localhost:8080/exercise 。

这是我的 Controller :

@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";
}
}

还有我的 thymeleaf 模板:

<!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()。有没有办法实现这个功能?或者是否有更好的方法,无需重新加载整个页面?

最佳答案

要在不刷新页面的情况下提供数据,您需要 Angular 或 React 等客户端技术。或者普通的旧 JavaScript。但是,如果不刷新页面,则无法在 spring mvc 中向页面提供新数据。

关于java - Thymeleaf:更新表单提交表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56261891/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com