如何在JavaScript中将动态表单数据整理为对象数组传递给C#后端？

核心问题定位 #

你遇到的[object Object]输出、JSON.stringify报错，本质是数据构造逻辑错误（比如字段数组长度不匹配、误将DOM元素而非值存入数组），或序列化前未校验数据有效性导致的。下面是具体的解决步骤与优化方案：

正确数据整理方法 #

假设你通过jQuery map获取了各字段的数组值，首先要确保所有字段数组长度一致（每个人员对应一组字段的索引相同），再构造人员对象数组：

// 1. 获取各字段的原生数组（注意用.get()转成JS原生数组，而非jQuery对象）
const titles = $('.title').map(function() { return $(this).val().trim(); }).get();
const firstNames = $('.first-name').map(function() { return $(this).val().trim(); }).get();
const lastNames = $('.last-name').map(function() { return $(this).val().trim(); }).get();
const dobs = $('.dob').map(function() { return $(this).val().trim(); }).get();

// 2. 先校验数组长度，避免索引越界
if (titles.length !== firstNames.length || titles.length !== lastNames.length || titles.length !== dobs.length) {
    console.error('错误：字段数量不匹配，请检查动态表单生成逻辑');
    return;
}

// 3. 构造人员对象数组
const details = titles.map((title, index) => ({
    Title: title,
    FirstName: firstNames[index],
    LastName: lastNames[index],
    DOB: dobs[index]
}));

序列化与后端传递 #

JSON.stringify报错常见原因：数组中混入DOM元素、存在undefined值或循环引用。按以下步骤处理：

// 先校验构造好的details数组
console.log('人员数据：', details);

// 序列化数据（如果报错，检查单个对象是否正常）
try {
    const jsonData = JSON.stringify({ details: details });
    // 传递给C# WebService
    $.ajax({
        url: '/YourService.asmx/SubmitPersonDetails',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: jsonData,
        success: res => console.log('提交成功：', res),
        error: (xhr, status, err) => console.error('提交失败：', err)
    });
} catch (e) {
    console.error('序列化失败：', e.message);
    // 定位错误对象
    details.forEach((item, idx) => {
        try { JSON.stringify(item); }
        catch (err) { console.log('错误对象索引：', idx, item); }
    });
}

C#后端对应结构 #

确保WebService的参数与前端对象结构完全匹配（属性名大小写、类型一致）：

[WebMethod]
public string SubmitPersonDetails(List<PersonDetail> details)
{
    // 业务处理逻辑
    return "提交成功";
}

public class PersonDetail
{
    public string Title { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string DOB { get; set; } // 若用DateTime类型，需确保前端日期格式符合后端要求（如yyyy-MM-dd）
}

错误排查步骤 #

1. 检查字段值有效性：console.log(titles, firstNames)，确认数组中是字符串值，而非DOM对象（忘记调用.val()或.get()）。
2. 校验数组长度：若长度不一致，说明动态表单生成时某个人员的字段缺失，需检查表单渲染逻辑。
3. 单独测试序列化：拿单个人员对象测试JSON.stringify({Title: "Mr", FirstName: "John"})，定位是单个对象问题还是数组问题。
4. 查看后端日志：若前端序列化成功但后端接收失败，检查WebService参数的属性名、类型是否与前端完全匹配。

更优实现方式 #

无需拆分单个字段数组，直接按人员容器分组处理，避免长度不匹配问题：
假设动态表单的每个人员字段包裹在.person-item容器中：

<div class="person-item">
    <input class="title" type="text">
    <input class="first-name" type="text">
    <input class="last-name" type="text">
    <input class="dob" type="date">
</div>

直接遍历容器构造对象：

const details = $('.person-item').map(function() {
    const $item = $(this);
    return {
        Title: $item.find('.title').val().trim(),
        FirstName: $item.find('.first-name').val().trim(),
        LastName: $item.find('.last-name').val().trim(),
        DOB: $item.find('.dob').val().trim()
    };
}).get(); // 转成原生数组

这种方式更直观，天然保证每个人员的字段完整性，减少出错概率。

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