如何将JS表单中的汽车列表转为JSON传给后端匹配Foo类结构

实现代码 #

你只需要替换JS代码中cars数组的部分即可，完整修改后的代码如下：

const form = document.getElementById('newBrand');

form.addEventListener('submit', async (e) => {
    e.preventDefault();
    // 动态获取所有汽车输入项，适配任意数量
    const carList = Array.from(document.querySelectorAll('#formCars li input[type="text"]'))
        .map(input => ({
            name: input.value.trim()
        }));

    fetch(`/brands`, {
        method: 'post',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            cars: carList
        })
    })
});

逻辑说明 #

• 选择器#formCars li input[type="text"]会匹配表单列表中所有的汽车名称输入框，后续你如果新增/删除汽车表单项，只要保持结构放在id="formCars"的ul下，无需修改JS代码即可自动适配
• Array.from用来将查询返回的NodeList转为标准数组，兼容所有现代浏览器
• 遍历生成的对象结构和后端Car类的name字段完全匹配，序列化后可直接被后端反序列化为Set<Car>集合

可选优化 #

如果需要过滤掉未填写的空汽车项，可以在map后追加过滤逻辑：

const carList = Array.from(document.querySelectorAll('#formCars li input[type="text"]'))
    .map(input => ({
        name: input.value.trim()
    }))
    .filter(car => car.name); // 只保留name不为空的项

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