使用Thymeleaf提交表单时后端获取username字段为null的问题

你代码的核心错误是将 Thymeleaf 的 th:field 属性用在了非表单提交元素 <td> 上：

• th:field 仅对 <input>、<select>、<textarea> 这类可提交的表单控件生效，作用是自动生成对应的 name 和 value 属性，在表单提交时会作为参数传递给后端。
• <td> 是表格单元格标签，不属于表单提交元素，哪怕你给它加了 th:field="${usersRole.username}"，浏览器提交表单时也不会把单元格的文本内容作为参数发送，所以后端收到的 username 始终为 null。
  另外你的HTML结构也存在标签未闭合、表单嵌套位置不规范的问题，也可能导致浏览器解析DOM结构异常，影响表单提交。

你需要在每个行的表单内新增一个隐藏的<input>控件，用来绑定当前行的username值，同时修正HTML结构：

<table>
    <thead>
    <tr>
        <th>Username</th>
        <th>Role</th>
        <th>Available Roles</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="user : ${users}">
        <td th:text="${user.username}"></td>
        <td th:text="${user.userRole}"></td>
        <td>
            <form th:action="@{/admin/change}" method="post" th:object="${usersRole}">
                <!-- 新增隐藏input提交username -->
                <input type="hidden" th:field="*{username}" th:value="${user.username}">
                <select th:field="*{role}">
                    <option value="ROLE">Role</option>
                    <option value="USER">User</option>
                </select>
                <button type="submit">Change</button>
            </form>
        </td>
    </tr>
    </tbody>
</table>

补充说明：

• 使用 th:object 绑定表单对象后，内部的 th:field 可以直接用 *{属性名} 的简写，不用写完整的 ${usersRole.xxx}
• 隐藏的input不会在页面显示，但会在表单提交时把当前行的user.username作为username参数传给后端，和选中的role一起对应到RoleChangeDto的两个字段。

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