如何序列化含集合字段的表单数据并在Spring Boot服务端完成反序列化？

阿华AIGC实验室

2026-4-30

解决方案：前端表单序列化 + Spring Boot后端接收

别急，这两个问题其实都有成熟的解决方案，我帮你一步步理清楚：

一、前端：将表单数据序列化为包含数组的JSON

你的表单里roles是多选下拉框，直接用FormData默认序列化会把多选值变成多个重复的key（比如roles=ADMIN&roles=USER），无法直接得到数组格式。我们需要手动处理表单字段，构建符合要求的JSON对象：

示例代码

// 给表单绑定提交事件
document.getElementById('new-user-form').addEventListener('submit', async (e) => {
  e.preventDefault(); // 阻止默认表单提交行为
  
  const form = e.target;
  
  // 1. 逐个获取普通输入字段的值
  const userData = {
    firstname: form.getElementById('firstname').value.trim(),
    lastname: form.getElementById('lastname').value.trim(),
    age: form.getElementById('age').value ? parseInt(form.getElementById('age').value) : null, // 处理空值转数字
    email: form.getElementById('email').value.trim(),
    password: form.getElementById('password').value
  };
  
  // 2. 处理多选roles字段，提取选中的选项文本
  const rolesSelect = form.querySelector('select[name="roles"]');
  userData.roles = Array.from(rolesSelect.selectedOptions).map(option => option.textContent);
  
  // 3. 发送POST请求到后端
  try {
    const response = await fetch('/api/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json', // 必须指定这个请求头，告诉后端是JSON格式
      },
      body: JSON.stringify(userData)
    });
    
    if (response.ok) {
      alert('用户创建成功！');
      form.reset(); // 重置表单
    } else {
      const errorMsg = await response.text();
      alert(`创建失败：${errorMsg}`);
    }
  } catch (err) {
    console.error('请求出错:', err);
    alert('网络异常，请稍后重试');
  }
});

关键说明

对于数字类型的age，要手动转成整数（或者根据后端需求处理空值）
多选下拉框通过selectedOptions获取所有选中项，再用map提取文本内容组成数组
必须设置Content-Type: application/json请求头，否则后端无法正确解析JSON

二、后端：Spring Boot将JSON自动转为User对象

你不需要手动遍历JSON字符串，Spring Boot自带的Jackson库可以自动完成JSON到Java对象的转换，只要做好以下几步：

1. 确保依赖正确

如果是Maven项目，pom.xml里已经包含spring-boot-starter-web（它默认集成了Jackson）：

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>

2. 创建User实体类

实体类的字段名要和JSON里的键名一致（或者用@JsonProperty指定映射关系），集合类型用List<String>接收roles数组：

import jakarta.persistence.*;
import java.util.List;

@Entity
@Table(name = "users")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    private String firstname;
    private String lastname;
    private Integer age;
    private String email;
    private String password;
    
    // 用@ElementCollection存储字符串集合（如果是JPA持久化）
    @ElementCollection(fetch = FetchType.EAGER)
    private List<String> roles;
    
    // 必须要有无参构造器（Jackson和JPA都需要）
    public User() {}
    
    // 可选：全参构造器
    public User(String firstname, String lastname, Integer age, String email, String password, List<String> roles) {
        this.firstname = firstname;
        this.lastname = lastname;
        this.age = age;
        this.email = email;
        this.password = password;
        this.roles = roles;
    }
    
    // 所有字段的Getter和Setter方法（必须要有，Jackson需要通过它们访问字段）
    public Long getId() { return id; }
    public void setId(Long id) { this.id = id; }
    
    public String getFirstname() { return firstname; }
    public void setFirstname(String firstname) { this.firstname = firstname; }
    
    public String getLastname() { return lastname; }
    public void setLastname(String lastname) { this.lastname = lastname; }
    
    public Integer getAge() { return age; }
    public void setAge(Integer age) { this.age = age; }
    
    public String getEmail() { return email; }
    public void setEmail(String email) { this.email = email; }
    
    public String getPassword() { return password; }
    public void setPassword(String password) { this.password = password; }
    
    public List<String> getRoles() { return roles; }
    public void setRoles(List<String> roles) { this.roles = roles; }
}

3. 编写RestController

用@RequestBody注解接收JSON请求体，Spring会自动把JSON转为User对象：

import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.net.URI;

@RestController
@RequestMapping("/api/users")
public class UserController {
    
    private final UserRepository userRepository; // 假设你已经定义了JPA Repository
    
    // 构造器注入Repository（Spring推荐的注入方式）
    public UserController(UserRepository userRepository) {
        this.userRepository = userRepository;
    }
    
    @PostMapping
    public ResponseEntity<User> createUser(@RequestBody User user) {
        // 重要：这里建议对密码进行加密，比如用BCryptPasswordEncoder
        // user.setPassword(passwordEncoder.encode(user.getPassword()));
        
        User savedUser = userRepository.save(user);
        // 返回201 Created状态码和新用户的URI
        return ResponseEntity.created(URI.create("/api/users/" + savedUser.getId()))
                             .body(savedUser);
    }
}