如何从Thymeleaf模板的HTML页面取值并传递至控制器？

嘿，我来帮你搞定这个问题！要把这些Thymeleaf绑定的表单值传递到控制器，核心是让浏览器能正确识别并提交这些参数，下面给你两种实用方案：

方法1：用Thymeleaf表单对象绑定（推荐，符合最佳实践） #

这是Spring Boot + Thymeleaf最优雅的做法，能自动完成参数封装，不用手动处理每个字段：

修改你的HTML表单 #

主要是给表单加上th:object绑定后端实体，再用th:field替代单独的th:value/th:text，它会自动生成name属性并完成双向绑定：

<div class="container" style="padding-top: 70px">
    <h2>Status Project</h2>
    <!-- 绑定后端传入的Project实体对象，比如你在渲染页面时把project放到Model里 -->
    <form action="#" th:action="@{/updateProject/__${projectId}__}" method="post" id="addProject" th:object="${project}">
        <div>
            <label for="usr">Project Name:</label>
            <!-- th:field会自动生成name="projectName"和对应的value值 -->
            <input type="text" class="form-control" id="usr" th:field="*{projectName}">
        </div>
        <div class="form-group" style="padding-top: 10px">
            <label for="comment">ITO Task:</label>
            <!-- 文本框用th:field会自动填充初始内容，用户修改后的值也能被提交 -->
            <textarea class="form-control" rows="5" id="comment" th:field="*{projectTask}"></textarea>
        </div>
        <div class="col-xs-4" style="padding-left: 0px; ">
            <label for="usr">Status:</label>
            <input type="text" class="form-control" id="status" th:field="*{projectStatus}">
        </div>
        <div class="col-sm-offset-2 col-sm-10" style="padding-top: 20px;right: 205px">
            <button type="submit" class="btn btn-success">Submit</button>
        </div>
    </form>
</div>

控制器接收参数 #

假设你有一个Project实体类，包含projectName、projectTask、projectStatus这些属性，控制器可以直接用@ModelAttribute接收封装好的对象：

@PostMapping("/updateProject/{projectId}")
public String updateProject(@PathVariable Long projectId, 
                            @ModelAttribute("project") Project project,
                            Model model) {
    // 这里project对象已经自动填充了表单提交的三个字段值
    // 你可以直接调用业务层方法更新项目，比如projectService.update(projectId, project);
    return "redirect:/project-list"; // 更新完成后重定向到项目列表页
}

方法2：手动添加name属性（快速解决） #

如果不想用表单对象绑定，也可以给每个表单元素加上name属性，浏览器会通过name识别要提交的参数：

修改HTML元素 #

给每个输入框/文本框加上对应的name：

<input type="text" class="form-control" id="usr" th:value="*{projectName}" name="projectName">
<textarea class="form-control" rows="5" id="comment" name="projectTask" th:text="*{projectTask}"></textarea>
<input type="text" class="form-control" id="status" th:value="*{projectStatus}" name="projectStatus">

控制器接收参数 #

用@RequestParam单独接收每个参数：

@PostMapping("/updateProject/{projectId}")
public String updateProject(@PathVariable Long projectId,
                            @RequestParam String projectName,
                            @RequestParam String projectTask,
                            @RequestParam String projectStatus,
                            Model model) {
    // 直接拿到三个字段的值，进行后续更新操作
    return "redirect:/project-list";
}

小提醒 #

• 如果你用*{...}表达式，必须确保表单有th:object绑定，不然Thymeleaf不知道这个表达式基于哪个对象，会报错；如果不想绑定对象，就换成${project.projectName}这种变量表达式。
• 文本框的th:text只是设置初始内容，用户修改后的内容只要有name属性就会被正常提交，不用担心。

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