Thymeleaf复选框在JS中无法绑定，保存用户时角色未关联

• 前端参数名与后端实体不匹配
  先核对Thymeleaf表单的字段name，比如角色多选框的name如果是roleIds，后端User实体得有对应的List<Long> roleIds属性；如果直接传Role对象，name要写成roles[0].id这种带索引的格式，Spring才能识别为集合。另外打开浏览器控制台，用console.log(data)查看Ajax构造的参数，确认角色相关数据是否完整。

• 后端接收方式错误
  如果Ajax传的是JSON格式，Controller方法必须加@RequestBody注解，示例代码：

  @PostMapping("/users")
  public ResponseEntity saveUser(@RequestBody User user) {
      // 业务逻辑处理
  }
  

  没加这个注解的话，Spring会把JSON当成普通表单参数解析，自然绑定不上角色集合。如果是表单提交格式，要确保User实体里的roles集合有对应的getter/setter方法，Spring依赖这些方法注入数据。

• Ajax请求的Content-Type配置错误
  提交JSON时，Ajax必须设置contentType: "application/json;charset=utf-8"，并且把数据转成JSON字符串，示例代码：

  $.ajax({
      url: '/saveUser',
      type: 'POST',
      contentType: 'application/json;charset=utf-8',
      data: JSON.stringify({
          username: 'xxx',
          roles: [{id: 1, name: 'admin'}, {id:2, name: 'user'}]
      }),
      success: function(res) {
          // 结果处理
      }
  });
  

  不设置Content-Type的话，浏览器会默认用表单格式提交，后端解析JSON失败，角色数据就会丢失。

• 角色数据构造不完整
  如果前端只传了角色ID，后端得先根据ID查询出Role对象，再关联到User，不能直接把ID数组赋值给User的roles集合。这种情况可以单独接收roleIds，再查询角色列表绑定，示例代码：

  @PostMapping("/users")
  public ResponseEntity saveUser(@RequestBody Map<String, Object> params) {
      List<Long> roleIds = (List<Long>) params.get("roleIds");
      User user = new User();
      user.setUsername((String) params.get("username"));
      List<Role> roles = roleService.listByIds(roleIds);
      user.setRoles(roles);
      userService.save(user);
      return ResponseEntity.ok().build();
  }
  

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