Spring Boot中DELETE请求异常及跨表单传递userId问题

核心问题分析 #

拆分表单后，Thymeleaf的th:form属性无法同时绑定多个表单，需要通过JavaScript同步选中值，确保两个表单提交时都能携带选中的userId参数。另外先修正一个HTML语法问题：<option>标签内不能嵌套<tr>，需把用户信息转为文本内容。

方法一：同步选中值到表单隐藏输入框 #

通过监听Select的变化事件，实时把选中值同步到两个表单的隐藏输入框中，提交表单时自动携带参数。

调整后的HTML代码

<!-- 修正option内容，移除非法的tr标签 -->
<select id="userSelect">
  <option th:each="user : ${users}" th:value="${user.id}">
    [[${user.name}]] [[${user.surname}]] (年龄: [[${user.age}]])
  </option>
</select>

<input type="button" value="Add" onclick="window.location.href = 'add'"/>

<!-- 删除表单：添加隐藏的userId输入框 -->
<form th:id="form_delete" th:action="@{/delete}" th:method="delete">
  <input type="hidden" name="userId" id="deleteUserId"/>
  <input type="submit" value="Delete"/>
</form>

<!-- 更新表单：添加隐藏的userId输入框 -->
<form th:id="form_update" th:action="@{/update}" th:method="patch">
  <input type="hidden" name="userId" id="updateUserId"/>
  <input type="submit" value="Update"/>
</form>

同步值的JavaScript代码

document.addEventListener('DOMContentLoaded', function() {
  const userSelect = document.getElementById('userSelect');
  const deleteUserIdInput = document.getElementById('deleteUserId');
  const updateUserIdInput = document.getElementById('updateUserId');

  // 页面加载时初始化选中值到输入框
  if (userSelect.value) {
    deleteUserIdInput.value = userSelect.value;
    updateUserIdInput.value = userSelect.value;
  }

  // 监听Select变化，实时同步值
  userSelect.addEventListener('change', function() {
    deleteUserIdInput.value = this.value;
    updateUserIdInput.value = this.value;
  });
});

方法二：提交表单时动态插入参数 #

不需要提前创建隐藏输入框，点击提交按钮时动态生成userId参数并添加到当前表单中。

调整后的HTML代码

<select id="userSelect">
  <option th:each="user : ${users}" th:value="${user.id}">
    [[${user.name}]] [[${user.surname}]] (年龄: [[${user.age}]])
  </option>
</select>

<input type="button" value="Add" onclick="window.location.href = 'add'"/>

<form th:id="form_delete" th:action="@{/delete}" th:method="delete">
  <input type="submit" value="Delete" onclick="appendUserIdToForm(this.form)"/>
</form>

<form th:id="form_update" th:action="@{/update}" th:method="patch">
  <input type="submit" value="Update" onclick="appendUserIdToForm(this.form)"/>
</form>

动态添加参数的JavaScript代码

function appendUserIdToForm(form) {
  const selectedUserId = document.getElementById('userSelect').value;
  
  // 创建隐藏的userId输入框
  const userIdInput = document.createElement('input');
  userIdInput.type = 'hidden';
  userIdInput.name = 'userId';
  userIdInput.value = selectedUserId;
  
  // 添加到当前表单并提交
  form.appendChild(userIdInput);
}

补充：解决PATCH请求失效问题 #

Spring Boot中表单默认只支持GET/POST请求，要启用PUT/PATCH等方法，需确保HiddenHttpMethodFilter处于启用状态（Spring Boot 2.2及以上版本默认启用）。th:method="patch"会自动生成一个名为_method的隐藏字段，值为PATCH，过滤器会将POST请求转换为PATCH请求，确保接口能正确接收。

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