如何从Thymeleaf视图向Spring控制器传递员工ID以实现删除操作？

看起来你现在卡在这里：HTML里的删除链接默认发GET请求，但控制器用的是DELETE方法，而且URL的写法也不对（直接写/employee/${employee.id}Thymeleaf不会解析变量）。我给你两个实用的解决方案：

方法一：表单+Spring的_method参数（传统REST风格实现） #

浏览器本身不支持通过链接发送DELETE请求，我们可以用表单来模拟这个行为，同时借助Spring的特性把POST请求转换成DELETE：

<td>
    <!-- 用Thymeleaf的@{...}语法动态生成URL，自动把employee.id填充到{id}占位符 -->
    <form th:action="@{/employee/{id}(id=${employee.id})}" method="post">
        <!-- Spring会识别这个参数，将POST请求映射到你的DELETE控制器方法 -->
        <input type="hidden" name="_method" value="DELETE" />
        <!-- 把按钮改成链接样式，保持页面视觉一致 -->
        <button type="submit" style="border: none; background: none; color: blue; text-decoration: underline; cursor: pointer;">Delete</button>
    </form>
</td>

对应的控制器可以用更语义化的@DeleteMapping注解替代原来的@RequestMapping，同时用@PathVariable接收ID：

// 替代原有@RequestMapping，写法更简洁清晰
@DeleteMapping("/employee/{id}")
public String deleteEmployee(@PathVariable("id") Long id) {
    // 这里调用你的业务逻辑完成删除，比如 employeeService.deleteById(id);
    // 删除后重定向回员工列表页面
    return "redirect:/employees";
}

注意：Spring Boot默认已经开启了HiddenHttpMethodFilter，如果是传统Spring MVC项目，需要在web.xml里手动配置这个过滤器才能识别_method参数。

方法二：JavaScript发送DELETE请求（更流畅的用户体验） #

如果想保留链接的样式和无刷新交互，可以用JS发送DELETE请求：

先修改HTML，给链接添加存储ID的data属性：

<td>
    <a href="#" th:data-id="${employee.id}" onclick="deleteEmployee(this)">Delete</a>
</td>

然后添加JavaScript函数：

function deleteEmployee(element) {
    // 从data属性中获取员工ID
    const employeeId = element.getAttribute('data-id');
    
    // 用fetch API发送DELETE请求
    fetch(`/employee/${employeeId}`, {
        method: 'DELETE'
    })
    .then(response => {
        if (response.ok) {
            // 请求成功后直接移除当前表格行，无需刷新页面
            element.closest('tr').remove();
        } else {
            alert('删除失败，请稍后重试');
        }
    })
    .catch(error => {
        console.error('删除请求出错:', error);
        alert('删除请求出错，请检查控制台');
    });
    
    // 阻止链接默认的跳转行为
    return false;
}

这种方法的优势是删除后不用刷新整个页面，用户体验更流畅。如果需要兼容旧浏览器，可以把fetch换成XMLHttpRequest。

额外提醒 #

原来HTML里的URL写法/employee/${employee.id}是错误的，Thymeleaf不会解析这种格式的变量，必须用@{/employee/{id}(id=${employee.id})}（规范写法）或者th:href="@{/employee/} + ${employee.id}"来生成正确的动态URL。

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