Thymeleaf 表单不会将实际的对象 ID 发送到 Java 控制器答案

【问题标题】：Thymeleaf form doesn't send the actual object id to the Java controllerThymeleaf 表单不会将实际的对象 ID 发送到 Java 控制器
【发布时间】：2017-03-08 21:21:28
【问题描述】：

所以我用 Thymeleaf 写了以下内容：

<form th:action="@{|/recipes/${recipe.id}/delete|}" method="post" id="recipeDeleteForm">
                             </form>

Java 中的以下内容：

@RequestMapping(value = "/recipes/{recipeId}/delete", method = RequestMethod.POST)
    public String deleteRecipe(@PathVariable Long recipeId, RedirectAttributes redirectAttributes){
        Recipe recipe = recipeService.findOne(recipeId);
        recipeService.delete(recipe);
        return "redirect:/";
    }

问题是当我在浏览器上按下删除按钮时，请求只会向控制器发送数字1，而不是发送具体的对象id。所以它总是会从列表中删除第一个元素，而不是我选择的那个。

编辑：实际上，这是增量的。如果我第一次从列表中删除一个随机对象，它将从列表中删除第一项，如果我从列表中删除另一个随机元素，它将删除第二个，依此类推...

要添加的其他内容是，如果我尝试转到详细信息页面或尝试编辑对象，则不会发生这种情况。它会将正确的 id 发送给控制器。这只发生在删除请求中。

这里的一个重要区别是编辑和详细信息操作是链接，而删除是表单操作。

这是整个标记文件的样子：

<!DOCTYPE html>
<html lang="en">
<head th:replace="layout :: head"></head>
<body>

<nav th:replace="layout :: nav"></nav>

<div class="grid-container">

    <div th:replace="layout :: logo"></div>

    <div class="grid-100">

        <div class="recipes">

            <div class="grid-100 row controls">
                <div class="grid-30">
                    <select>
                        <option value="">All Categories</option>
                        <option value="breakfast">Breakfast</option>
                        <option value="lunch">Lunch</option>
                        <option value="dinner">Dinner</option>
                        <option value="dessert">Dessert</option>
                    </select>
                </div>
                <div class="grid-40">
                    <input placeholder="Search"></input>
                </div>
                <div class="grid-30">
                    <div class="flush-right">
                        <a th:href="@{/recipes/add-new-recipe}"><button>+ Add Recipe</button></a>
                    </div>
                </div>
            </div> <div class="clear"></div>

            <div class="grid-100 row addHover" th:each="recipe : ${recipes}">
                <a th:href="@{|/recipes/${recipe.id}/detail|}">
                    <div class="grid-70">
                        <p>
                            <span><img th:src="@{/images/favorite.svg}" height="12px"/> </span>
                            <span th:text="${recipe.name}"></span>
                        </p>
                    </div>
                </a>
                <div class="hoverBlock">
                    <div class="grid-30">
                        <div class="flush-right">
                            <p>
                                <a th:href="@{|/recipes/${recipe.id}/edit|}"> <img th:src="@{/images/edit.svg}" height="12px"/> Edit </a>
                                <a href="javascript:;" onclick="document.getElementById('recipeDeleteForm').submit();"> <img th:src="@{/images/delete.svg}" height="12px"/> Delete </a>
                                <form th:action="@{|/recipes/${recipe.id}/delete|}" method="post" id="recipeDeleteForm">
                                </form>
                            </p>
                        </div>
                    </div>
                </div>
            </div><div class="clear"></div>

            <div class="row">&nbsp;</div>

        </div>
    </div>
</div>
</body>
</html>

【问题讨论】：

@{|/recipes/ 是一个集合/数组/列表，因此您需要对其进行迭代

标签： java spring thymeleaf

【解决方案1】：

问题是我使用<a>标签来提交删除表单：

<a href="javascript:;" onclick="document.getElementById('recipeDeleteForm').submit();"> <img th:src="@{/images/delete.svg}" height="12px"/> Delete </a>
                                <form th:action="@{|/recipes/${recipe.id}/delete|}" method="post" id="recipeDeleteForm">
                                </form>

解决方案是在表单标签内使用按钮，并消除锚点：

<form th:action="@{|/recipes/${recipe.id}/delete|}" method="post" id="recipeDeleteForm">
                                    <button type="submit">Delete</button>
                                </form>

【讨论】：