JavaScript动态表单：如何单独获取每个成人数据并序列化提交

嘿，我来帮你搞定这个动态表单的序列化需求！根据你的描述，每个成人的表单区块都带有add_pax_adult_x类（x是编号），我们的目标是把每个成人的数据单独存入变量，再通过Ajax提交时整理成清晰的格式。

核心思路 #

我们需要遍历所有成人表单区块，对每个区块内的表单元素单独序列化，然后将每个成人的数据整理成独立的对象/数组项，这样后端就能轻松识别每个成人的信息。

jQuery实现方案（如果你在用jQuery） #

// 1. 获取所有成人表单区块
const adultSections = $('.add_pax_adult_x');
// 2. 初始化数组存储每个成人的数据
const adultDataList = [];

// 3. 遍历每个成人区块
adultSections.each(function(sectionIndex) {
  // 序列化当前区块内的所有表单元素，得到键值对数组
  const rawData = $(this).find(':input').serializeArray();
  // 转成更易读的键值对对象
  const processedData = {};
  rawData.forEach(item => {
    processedData[item.name] = item.value;
  });
  // 将当前成人的数据加入数组，可自定义键名（比如adult_1、adult_2）
  adultDataList.push({
    [`adult_${sectionIndex + 1}`]: processedData
  });
});

// 4. 用Ajax提交整理好的数据
$.ajax({
  url: '你的接口地址',
  method: 'POST',
  // 如果后端接收JSON格式，就转成字符串
  data: JSON.stringify(adultDataList),
  contentType: 'application/json',
  success: function(res) {
    console.log('提交成功！', res);
  },
  error: function(err) {
    console.error('提交出错了', err);
  }
});

原生JavaScript实现方案（无jQuery） #

如果项目里不用jQuery，用原生JS也能轻松实现：

// 1. 获取所有成人表单区块
const adultSections = document.querySelectorAll('.add_pax_adult_x');
// 2. 初始化数组存储每个成人的数据
const adultDataList = [];

// 3. 遍历每个成人区块
adultSections.forEach((section, sectionIndex) => {
  // 用FormData快速获取表单数据
  const formData = new FormData(section);
  // 转成键值对对象
  const processedData = Object.fromEntries(formData);
  // 加入数组
  adultDataList.push({
    [`adult_${sectionIndex + 1}`]: processedData
  });
});

// 4. 用fetch提交数据
fetch('你的接口地址', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(adultDataList)
})
.then(res => res.json())
.then(data => console.log('提交成功！', data))
.catch(err => console.error('提交出错了', err));

自定义格式调整 #

如果你希望后端接收的是对象而非数组（比如键是adult_1、adult_2直接作为顶级键），可以把代码改成这样：

// jQuery版本示例
const adultDataObject = {};
adultSections.each(function(sectionIndex) {
  const rawData = $(this).find(':input').serializeArray();
  const processedData = {};
  rawData.forEach(item => {
    processedData[item.name] = item.value;
  });
  adultDataObject[`adult_${sectionIndex + 1}`] = processedData;
});
// 提交时用adultDataObject即可

这样处理后，每个成人的数据都会被单独存放在对应的变量结构里，完全符合你的需求~

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