如何基于Spring 4 MVC与Thymeleaf实现表格数据的POST提交？

我来帮你梳理下如何实现这个需求，分单条数据操作和批量数据提交两种常见场景来讲解，你可以根据实际业务需求选择合适的方式：

场景一：单条数据提交（编辑/删除） #

这种场景适合对表格中的某一行数据进行单独操作（比如编辑或删除），步骤如下：

1. 前端Thymeleaf页面修改 #

把你的DataTable包裹在<form>标签中，同时为每一行添加操作按钮和隐藏域来传递当前行的标识（比如客户ID）：

<!-- 表单指向后端的POST请求地址 -->
<form th:action="@{/clientes/handle-action}" method="post">
    <table id="dataTable" class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>CI</th>
                <th>Division</th>
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Direccion</th>
                <th>Email</th>
                <th>Telefono</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 遍历客户列表 -->
            <tr th:each="cliente : ${lista}">
                <td th:text="${cliente.id}"></td>
                <td th:text="${cliente.ci}"></td>
                <td th:text="${cliente.division}"></td>
                <td th:text="${cliente.nombre}"></td>
                <td th:text="${cliente.apellido}"></td>
                <td th:text="${cliente.direccion}"></td>
                <td th:text="${cliente.email}"></td>
                <td th:text="${cliente.telefono}"></td>
                <td>
                    <!-- 隐藏域传递当前客户ID -->
                    <input type="hidden" name="clienteId" th:value="${cliente.id}" />
                    <!-- 编辑按钮，通过action参数区分操作类型 -->
                    <button type="submit" name="action" value="edit" class="btn btn-sm btn-primary">编辑</button>
                    <!-- 删除按钮 -->
                    <button type="submit" name="action" value="delete" class="btn btn-sm btn-danger">删除</button>
                </td>
            </tr>
        </tbody>
    </table>
</form>

2. 后端Spring MVC Controller处理 #

创建对应的Controller方法，接收前端传递的参数并处理业务逻辑：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

@Controller
@RequestMapping("/clientes")
public class ClienteController {

    // 注入你的业务服务层（假设已实现）
    @Autowired
    private ClienteService clienteService;

    // 处理单条数据的操作请求
    @PostMapping("/handle-action")
    // 如果是Spring 4.3之前的版本，改用@RequestMapping(method = RequestMethod.POST)
    public String handleClienteAction(@RequestParam("clienteId") Long clienteId,
                                      @RequestParam("action") String action,
                                      RedirectAttributes redirectAttributes) {
        try {
            if ("edit".equals(action)) {
                // 编辑逻辑：跳转到编辑页面，携带客户ID
                return "redirect:/clientes/edit/" + clienteId;
            } else if ("delete".equals(action)) {
                // 删除逻辑：调用服务层删除客户
                clienteService.deleteClienteById(clienteId);
                redirectAttributes.addFlashAttribute("successMsg", "客户删除成功");
            }
        } catch (Exception e) {
            redirectAttributes.addFlashAttribute("errorMsg", "操作失败：" + e.getMessage());
        }
        // 操作完成后重定向回客户列表页面
        return "redirect:/clientes/list";
    }
}

场景二：批量数据提交（批量删除/批量更新） #

如果需要对多条选中的数据进行批量操作，可以用复选框来选择数据，再统一提交：

1. 前端Thymeleaf页面修改 #

添加复选框选择行，同时保留表单结构：

<form th:action="@{/clientes/batch-delete}" method="post">
    <table id="dataTable" class="table table-striped">
        <thead>
            <tr>
                <th><input type="checkbox" id="selectAllBtn" /></th>
                <th>ID</th>
                <!-- 其他列表头和之前一致 -->
            </tr>
        </thead>
        <tbody>
            <tr th:each="cliente : ${lista}">
                <td>
                    <!-- 复选框，name统一为clienteIds，值为客户ID -->
                    <input type="checkbox" name="clienteIds" th:value="${cliente.id}" />
                </td>
                <td th:text="${cliente.id}"></td>
                <!-- 其他列内容和之前一致 -->
            </tr>
        </tbody>
    </table>
    <!-- 批量提交按钮 -->
    <button type="submit" class="btn btn-danger">批量删除选中客户</button>
</form>

<!-- 可选：全选/取消全选的JS脚本 -->
<script>
document.getElementById('selectAllBtn').addEventListener('change', function(e) {
    const checkboxes = document.querySelectorAll('input[name="clienteIds"]');
    checkboxes.forEach(cb => cb.checked = e.target.checked);
});
</script>

2. 后端Spring MVC Controller处理 #

接收前端传递的ID列表，执行批量操作：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import java.util.List;

@Controller
@RequestMapping("/clientes")
public class ClienteController {

    @Autowired
    private ClienteService clienteService;

    // 处理批量删除请求
    @PostMapping("/batch-delete")
    public String handleBatchDelete(@RequestParam("clienteIds") List<Long> clienteIds,
                                    RedirectAttributes redirectAttributes) {
        try {
            clienteService.batchDeleteClientes(clienteIds);
            redirectAttributes.addFlashAttribute("successMsg", "批量删除成功，共删除" + clienteIds.size() + "条数据");
        } catch (Exception e) {
            redirectAttributes.addFlashAttribute("errorMsg", "批量删除失败：" + e.getMessage());
        }
        return "redirect:/clientes/list";
    }
}

注意事项 #

1. Spring版本兼容：如果你的Spring 4版本低于4.3，记得把@PostMapping替换成@RequestMapping(method = RequestMethod.POST)。
2. 实体类要求：确保你的Cliente实体类包含所有对应字段的getter和setter方法，Spring MVC才能正确接收参数。
3. 重定向提示：使用RedirectAttributes传递操作结果提示信息，避免刷新页面时重复提交。

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