Node Express场景下如何通过表单向服务端传递嵌套对象等复杂数据

有两种主流的落地方式，可根据业务场景选择：

方案1：原生表单直接提交 #

大部分服务端开发框架都默认支持解析带方括号命名的表单字段，不需要额外编写前端JS代码：
将嵌套层级的字段用[字段名]的格式写在name属性中即可，示例代码如下：

<form action="/home" method="POST">
    <input name="title">
    <input name="content[something]">
</form>

表单提交后服务端解析得到的数据就是你需要的嵌套结构，该方案兼容性好，适合纯静态表单的场景。

方案2：JS异步提交JSON数据 #

如果嵌套层级非常复杂，或者需要前端先对数据做加工处理，可以选择通过JS手动组装数据后提交JSON格式的请求，示例代码如下：

document.querySelector('form').addEventListener('submit', async (e) => {
  // 阻止默认表单提交行为
  e.preventDefault();
  // 自定义组装任意层级的嵌套数据
  const requestData = {
    title: document.querySelector('input[name="title"]').value,
    content: {
      something: document.querySelector('input[name="content[something]"]').value
    }
  };
  // 发送POST请求
  await fetch('/home', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(requestData)
  });
});

该方案灵活性更高，支持任意复杂的嵌套结构，需要服务端配置JSON请求体解析能力。

注意事项 #

• 原生表单提交的是application/x-www-form-urlencoded格式数据，主流框架（Express、Spring Boot、PHP、Django等）均默认支持该格式的嵌套解析能力，无需额外配置。
• JSON提交方案需要服务端对应接口支持接收application/json格式的请求。

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