JavaScript 中怎么使用 Fetch 提交包含复杂对象的嵌套表单数据-js教程-PHP中文网

推荐用json格式提交嵌套对象：设置content-type: application/json，用json.stringify()序列化整个对象；若必须用x-www-form-urlencoded，则需手动扁平化键名（如userprofile），再通过urlsearchparams发送。

javascript 中怎么使用 fetch 提交包含复杂对象的嵌套表单数据

JavaScript 中用 fetch 提交嵌套对象表单数据，关键不是“直接发送对象”，而是把复杂结构**序列化为服务端能解析的格式**——最常用的是 application/json（推荐）或 application/x-www-form-urlencoded（需手动扁平化）。浏览器原生 FormData 不支持嵌套对象，会丢弃层级、只保留最后一层键值。

✅ 推荐方式：用 JSON 格式提交（服务端需支持解析 JSON）

这是最自然、最可靠的方式，尤其适合 RESTful API。前端将嵌套对象直接转成 JSON 字符串，设置正确请求头：

设置 Content-Type: application/json
用 JSON.stringify() 序列化整个数据对象
后端（如 Express、Spring Boot、Django）默认可解析 JSON body

示例：

const formData = {
  user: {
    name: "张三",
    profile: {
      age: 28,
      tags: ["frontend", "js"]
    }
  },
  metadata: {
    source: "web",
    timestamp: Date.now()
  }
};

fetch("/api/submit", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(formData)
})
.then(r => r.json())
.then(data => console.log("成功:", data));

⚠️ 若必须用 x-www-form-urlencoded（如对接传统 PHP 表单）

标准 FormData 无法保留嵌套结构（formData.append("user[name]", "张三") 这种写法虽可行，但需手动遍历对象生成键名）。建议用工具函数扁平化：

递归遍历对象，生成类似 user.profile.age=28 的键值对
用 URLSearchParams 或自定义拼接，再转为字符串
不设 Content-Type，让浏览器自动设为 x-www-form-urlencoded

简易扁平化函数示例：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

function flattenObject(obj, prefix = "", result = {}) {
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      const newKey = prefix ? `${prefix}[${key}]` : key;
      if (obj[key] !== null && typeof obj[key] === "object" && !Array.isArray(obj[key])) {
        flattenObject(obj[key], newKey, result);
      } else {
        result[newKey] = obj[key];
      }
    }
  }
  return result;
}

const flatData = flattenObject(formData);
// → { "user[name]": "张三", "user[profile][age]": 28, ... }

fetch("/api/submit", {
  method: "POST",
  body: new URLSearchParams(flatData)
});

❌ 避免踩坑：FormData + 嵌套对象 = 不工作

下面写法看似合理，但实际无效：

const fd = new FormData();
fd.append("data", JSON.stringify(formData)); // ❌ 后端收到的是字符串字段，不是解析后的对象
fd.append("user", JSON.stringify(formData.user)); // ❌ 仍是字符串，不是结构化数据

除非后端主动调用 JSON.parse() 解析某个字段，否则不会得到嵌套对象。这不是标准表单行为，也不推荐依赖。