如何动态将多用户表单数据（含地址）转为JSON数组并处理

云上老周

2026-6-26

问题描述

作为开发新手，当前代码仅支持处理单个用户的表单数据，希望优化实现动态获取n个用户的输入信息（包含嵌套的address字段），将其转换为JSON数组，并在前端JS和后端Java Controller中完成处理。现有相关代码及尝试的动态数组写法，请教如何在数组中添加address字段，同时实现完整的多用户数据动态收集与后端处理？

预期输入数据格式

[
  {
    "name":"Jones",
    "lastname":" Smith",
    "email":"smith@a.com",
    "gender":"Male",
    "age": 28,
    "address": {
      "streetaddress":"724th Street",
      "city":"New York",
      "state": "NY",
      "postalcode":"10038"
    }
  },
  {
    "name":"Jack",
    "lastname":" farmer",
    "email":"farmer@a.com",
    "gender":"Male",
    "age": 32,
    "address": {
      "streetaddress":"121th Street",
      "city":"New York",
      "state": "NY",
      "postalcode":"10045"
    }
  }
]

完整解决方案

一、前端改造（动态收集多用户数据）

1. 表单结构调整（register.jsp）

新增动态添加用户的按钮，给每组用户表单加统一容器，区分基本信息和地址字段：

<!-- 初始用户组 -->
<div class="user-group">
  <input type="text" class="name" placeholder="名字">
  <input type="text" class="lastname" placeholder="姓氏">
  <input type="email" class="email" placeholder="邮箱">
  <select class="gender">
    <option value="Male">男</option>
    <option value="Female">女</option>
  </select>
  <input type="number" class="age" placeholder="年龄">
  
  <!-- 地址子表单 -->
  <div class="address-group">
    <input type="text" class="streetaddress" placeholder="街道地址">
    <input type="text" class="city" placeholder="城市">
    <input type="text" class="state" placeholder="州/省份">
    <input type="text" class="postalcode" placeholder="邮编">
  </div>
</div>

<button id="add-user">添加用户</button>
<button id="register">提交所有用户</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. JS逻辑改造（动态添加+数据收集）

实现动态新增用户表单、批量收集数据（含嵌套address）、正确发送JSON数组：

$(document).ready(function() {
  // 点击新增用户组
  $("#add-user").click(function() {
    const userGroupHtml = `
      <div class="user-group">
        <input type="text" class="name" placeholder="名字">
        <input type="text" class="lastname" placeholder="姓氏">
        <input type="email" class="email" placeholder="邮箱">
        <select class="gender">
          <option value="Male">男</option>
          <option value="Female">女</option>
        </select>
        <input type="number" class="age" placeholder="年龄">
        
        <div class="address-group">
          <input type="text" class="streetaddress" placeholder="街道地址">
          <input type="text" class="city" placeholder="城市">
          <input type="text" class="state" placeholder="州/省份">
          <input type="text" class="postalcode" placeholder="邮编">
        </div>
      </div>
    `;
    $("body").append(userGroupHtml);
  });

  // 提交所有用户数据
  $("#register").click(function() {
    const usersArr = [];
    // 遍历所有用户组，收集数据
    $(".user-group").each(function() {
      const $group = $(this);
      const user = {
        name: $group.find(".name").val(),
        lastname: $group.find(".lastname").val(),
        email: $group.find(".email").val(),
        gender: $group.find(".gender").val(),
        age: parseInt($group.find(".age").val()),
        // 嵌套address对象
        address: {
          streetaddress: $group.find(".streetaddress").val(),
          city: $group.find(".city").val(),
          state: $group.find(".state").val(),
          postalcode: $group.find(".postalcode").val()
        }
      };
      usersArr.push(user);
    });

    // 转换为JSON数组
    const usersJson = JSON.stringify(usersArr);

    // 发送AJAX请求
    $.ajax({
      url: '/register',
      type: 'POST',
      data: usersJson,
      dataType: 'json',
      contentType: 'application/json', // 必须设置，告知后端是JSON格式
      success: function() {
        alert("所有用户数据提交成功！");
      },
      error: function() {
        alert("提交失败，请检查数据格式");
      }
    });
  });
});

二、后端改造（接收JSON数组并处理）

1. UserController.java 修改

调整为接收JSON数组，解析为List<User>并批量处理：

import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedReader;
import java.io.IOException;
import java.util.List;

@WebServlet(name = "UserController", urlPatterns = {"/register"})
public class UserController extends HttpServlet {
    private Gson gson = new Gson();

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 读取请求体中的JSON数据
        BufferedReader reader = request.getReader();
        StringBuilder sb = new StringBuilder();
        String line;
        while ((line = reader.readLine()) != null) {
            sb.append(line);
        }
        String jsonStr = sb.toString();

        // 解析JSON数组为User列表
        List<User> userList = gson.fromJson(jsonStr, new TypeToken<List<User>>(){}.getType());

        // 批量处理用户（示例：打印数据，实际可存入数据库）
        for(User user : userList) {
            System.out.println("用户姓名：" + user.getName() + " " + user.getLastName());
            System.out.println("用户地址：" + user.getAddress().getStreetaddress() + ", " + user.getAddress().getCity());
        }

        // 返回成功响应
        response.setContentType("application/json");
        response.getWriter().write(gson.toJson("处理成功"));
    }
}

2. 实体类完善

确保Address.java有正确的字段、无参构造和getter/setter：

public class Address {
    private String streetaddress;
    private String city;
    private String state;
    private String postalcode;

    // Gson解析必须的无参构造
    public Address() {}

    public Address(String streetaddress, String city, String state, String postalcode) {
        this.streetaddress = streetaddress;
        this.city = city;
        this.state = state;
        this.postalcode = postalcode;
    }

    // getter和setter
    public String getStreetaddress() { return streetaddress; }
    public void setStreetaddress(String streetaddress) { this.streetaddress = streetaddress; }
    public String getCity() { return city; }
    public void setCity(String city) { this.city = city; }
    public String getState() { return state; }
    public void setState(String state) { this.state = state; }
    public String getPostalcode() { return postalcode; }
    public void setPostalcode(String postalcode) { this.postalcode = postalcode; }
}

User.java补充无参构造（Gson解析必须）：

import javax.persistence.*;

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
    @Column(name = "first_name")
    private String name;
    @Column(name = "last_name")
    private String lastName;
    @Column(name = "user_name")
    private String email;
    @Embedded
    private Address address;
    @Column(name = "gender")
    private String gender;
    @Column(name = "age")
    private int age;

    // Gson解析必须的无参构造
    public User() {}

    public User(String name, String lastName, String email, Address address, String gender, int age) {
        this.name = name;
        this.lastName = lastName;
        this.email = email;
        this.address = address;
        this.gender = gender;
        this.age = age;
    }

    // 所有字段的getter和setter
    public Long getId() { return id; }
    public void setId(Long id) { this.id = id; }
    public String getName() { return name; }
    public void setName(String name) { this.name = name; }
    public String getLastName() { return lastName; }
    public void setLastName(String lastName) { this.lastName = lastName; }
    public String getEmail() { return email; }
    public void setEmail(String email) { this.email = email; }
    public Address getAddress() { return address; }
    public void setAddress(Address address) { this.address = address; }
    public String getGender() { return gender; }
    public void setGender(String gender) { this.gender = gender; }
    public int getAge() { return age; }
    public void setAge(int age) { this.age = age; }
}

关键注意事项

前端AJAX必须设置contentType: 'application/json'，否则后端无法识别JSON格式
后端解析泛型列表必须用TypeToken，不能直接传入List.class
实体类必须包含无参构造，Gson解析依赖该构造方法
前端收集数据时，要确保用户组内的字段类名和JS选择器对应，避免获取不到值

内容的提问来源于stack exchange，提问作者F.M

如何动态将多用户表单数据（含地址）转为JSON数组并处理

预期输入数据格式 #

完整解决方案 #

一、前端改造（动态收集多用户数据） #