推荐用JSON格式提交嵌套对象：设置Content-Type: application/json，用JSON.stringify()序列化整个对象；若必须用x-www-form-urlencoded，则需手动扁平化键名（如userprofile），再通过URLSearchParams发送。
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]", "张三") 这种写法虽可行，但需手动遍历对象生成键名）。建议用工具函数扁平化：
立即学习“Java免费学习笔记（深入）”；
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 递归遍历对象，生成类似
user.profile.age=28的键值对 - 用
URLSearchParams或自定义拼接，再转为字符串 - 不设
Content-Type，让浏览器自动设为x-www-form-urlencoded
简易扁平化函数示例：
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() 解析某个字段，否则不会得到嵌套对象。这不是标准表单行为，也不推荐依赖。
? 小贴士：文件 + 嵌套数据混合怎么办？
如果表单含文件和嵌套 JSON 数据，FormData 是唯一选择，但嵌套部分仍需字符串化：
- 文件字段正常
append("file", input.files[0]) - 嵌套数据作为字符串字段：
fd.append("metadata", JSON.stringify(metaObj)) - 后端分别处理文件和解析该字符串字段
此时无需设 Content-Type，浏览器会自动使用带 boundary 的 multipart/form-data。
