如何使用Thymeleaf创建可点击列表并将值传递给Spring Boot控制器

问题根因 #

你的代码将th:name="item"定义在了div标签上，而div不属于表单提交字段，只有带有name属性的表单元素（input、button、select等）的内容才会随表单提交到后端，你当前的submit按钮没有设置name="item"，所以后端接收不到对应参数。

解决方案1：直接给提交按钮加name属性（最简便） #

直接修改submit按钮的属性，给它添加name="item"即可，点击对应按钮时，该按钮的value值就会作为item参数提交到后端：

<form th:action="@{/mylist}" method="post">
    ...
    <div th:each="item : ${items}">
        <!-- 给submit按钮加name="item"，th:text可以自定义按钮显示的文本，比如显示item的名称而不是code -->
        <input type="submit" name="item" th:value="${item.code}" th:text="${item.id}"/>
    </div>
    ...
</form>

解决方案2：普通文本样式的列表（点击文本提交，无按钮样式） #

如果你希望列表项看起来是普通文本，不需要按钮样式，可以用隐藏字段加样式重置的提交按钮实现，无需额外JS：

<ul>
    <li th:each="item : ${items}">
        <!-- 每个列表项对应一个独立表单，样式设为行内不影响排版 -->
        <form th:action="@{/mylist}" method="post" style="display: inline;">
            <input type="hidden" name="item" th:value="${item.code}"/>
            <!-- 按钮样式重置为普通文本 -->
            <button type="submit" style="background: none; border: none; padding: 0; cursor: pointer;" th:text="${item.id}"></button>
        </form>
    </li>
</ul>

两种方案都可以让你的控制器正确接收到item参数的值。

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