跨表单提交本身不减少请求次数，真正减少请求数的是合并数据与节省传输；可通过FormData手动聚合多表单字段并用fetch一次性提交，需注意disabled、checkbox、file、重复name等细节处理。
跨表单提交本身不减少请求次数——它只是把多个表单的提交动作合并到一次 HTTP 请求中。真正能减少请求数的，是避免重复提交、复用已有数据、或用单次请求承载多组业务逻辑。关键不在“跨”，而在“合”与“省”。
用 FormData 合并多个表单字段再 submit
浏览器原生 <form></form> 只能提交自己包裹的内容。但你可以手动收集多个表单的值，塞进一个 FormData 实例，再用 fetch 提交。这绕开了页面跳转，也避免了每个表单单独发请求。
常见错误是直接序列化整个 form 元素却忽略 disabled 字段，或没处理 type="checkbox" 未勾选时根本不进 FormData 的问题。
- 遍历所有目标
<form></form>，用form.elements获取控件，逐个判断disabled和checked状态 - 对
<input type="file">，必须用FileList原始对象追加，不能用字符串值 - 同名字段（如多个
name="tag"）会被自动合并为多个条目，FormData.getAll('tag')可取全量 - 不要用
JSON.stringify包裹 FormData——它不是普通对象，fetch会自动处理 multipart 边界
submit 事件拦截 + 一次 fetch 替代多个 form.submit()
多个表单共用同一个提交逻辑时，别给每个都绑 submit 事件再分别发请求。统一拦截，攒数据，发一次。
立即学习“前端免费学习笔记（深入）”；
典型场景：分步注册页（基本信息、地址、偏好）三个 <form></form>，但后端只接受一个 /api/register 接口。
- 所有表单设
onsubmit="event.preventDefault(); collectAndSubmit(); return false;" -
collectAndSubmit()函数里调用new FormData(formEl)多次，再用append()合并到主实例 - 注意
<select multiple></select>的值要用Array.from(select.selectedOptions).map(o => o.value)拿全 - 若某表单含必填校验失败，就 stop，不进 fetch；否则 fetch 成功后才清空本地缓存或跳转
隐藏字段 + action 跳转实现“伪合并”
不依赖 JS 也能减少请求数：用一个主表单，把其他表单的字段用 <input type="hidden"> 预埋进去，靠用户操作实时更新这些隐藏值。
适合老旧系统或 JS 不可用环境，但容易因 DOM 更新不同步导致隐藏值滞后。
- 监听其他表单的
input或change事件，动态写入对应<input hidden name="xxx"> - 注意
textarea和contenteditable区域需监听input，而非change - 对 checkbox/radio，要显式判断是否被选中，再决定 hidden 字段值设为
"true"还是删掉该字段 - 提交前用
console.log(new URLSearchParams(new FormData(mainForm)).toString())快速验证字段是否齐全
最易被忽略的是字段命名冲突和空值处理——两个表单都有 name="phone"，合并时后者会覆盖前者；而 name="tags" 若某次为空数组，FormData 里根本不会出现这个 key，后端可能报错。别假设“字段名不重就安全”，得在合并逻辑里做显式去重、默认值兜底和类型归一化。
