如何在Thymeleaf中实现<input type="number">的onchange事件修改购物车数量？

• 值传递失效：你当前JS代码中的Thymeleaf内联表达式/*[[${item.quantity}]]*/会在页面渲染时直接替换为服务端存储的原始数量值，你通过onchange传入的新数量data会被覆盖，无法拿到用户修改后的值。
• 无数据同步逻辑：仅修改前端输入框的值没有同步到后端，既没有更新服务端Session/数据库中存储的购物车数据，也没有修改当前会话中${item.quantity}的取值，刷新页面后会自动恢复原始值。
• 缺少商品标识：购物车存在多个商品的场景下，你没有传递当前修改的商品ID，后端无法识别需要更新哪个商品的数量。

1. 修改HTML模板 #

给输入框添加商品ID的自定义属性，同时传递商品ID和新数量到JS函数：

<input 
  type="number"
  onchange="changeQuantity(this.dataset.itemId, this.value)"
  min="1"
  max="5" 
  th:value="${item.quantity}"
  th:data-item-id="${item.id}"
>

2. 修改JavaScript逻辑 #

添加AJAX请求将修改后的数据同步到后端，更新成功后再刷新页面（也可以前端局部更新总价减少刷新操作）：

<script th:inline="javascript">
/*<![CDATA[*/
function changeQuantity(itemId, newQuantity) {
  // 合法性校验
  newQuantity = parseInt(newQuantity)
  if (isNaN(newQuantity) || newQuantity < 1 || newQuantity > 5) {
    return
  }
  // 发送请求同步到后端
  fetch('/cart/updateItem', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `itemId=${encodeURIComponent(itemId)}&quantity=${newQuantity}`
  }).then(response => {
    if (response.ok) {
      // 可选：如果后端返回新的总价，可以直接更新DOM不刷新页面，体验更好
      location.reload()
    }
  })
}
/*]]>*/
</script>

3. 补充后端处理接口 #

在Spring Controller中添加购物车更新接口，接收商品ID和数量，更新对应购物车数据后返回成功状态：

@PostMapping("/cart/updateItem")
@ResponseBody
public ResponseEntity<Void> updateCartItem(@RequestParam Long itemId, @RequestParam Integer quantity, HttpSession session) {
    // 从session/数据库拿到当前用户购物车
    Cart cart = (Cart) session.getAttribute("cart");
    // 更新对应商品的数量
    cart.updateItemQuantity(itemId, quantity);
    // 保存回session/数据库
    session.setAttribute("cart", cart);
    return ResponseEntity.ok().build();
}

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