HTML5多表单合并提交技巧解析

2、使用document.querySelectorAll('form[data-group]')筛选带分组标识的表单；

3、初始化空对象mergedData = {}；

4、对每个匹配表单读取其dataset.group值作为主键；

5、遍历该表单下所有有效控件，将name和value存入mergedData[groupId]对应的子对象；

6、最终mergedData结构为{ "profile": { "name": "张三", "email": "z@x.com" }, "payment": { "card": "1234" } }；

三、利用FormData API逐个追加表单数据

FormData原生支持append方法，允许将多个表单的字段逐一添加至同一实例。该方式兼容文件上传字段，且自动处理编码与边界，适用于需发送multipart/form-data类型请求的场景。

1、创建新FormData实例：const formData = new FormData()；

2、获取所有form元素节点列表；

3、对每个form节点调用new FormData(form)生成临时实例；

4、遍历临时FormData实例的所有键值对，使用formData.append(key, value)追加到主实例；

5、对checkbox和radio类型，仅当element.checked为true时才append；

6、对file类型input，直接append其files[0]（多文件需循环）；

四、通过隐藏表单集中代理提交

该方法不修改原始表单结构，而是动态创建一个隐藏form元素，将其action、method设为与目标一致，并将其他表单所有有效字段克隆为隐藏input插入其中。最终触发该隐藏表单的submit事件完成合并提交。

1、使用document.createElement('form')创建新form节点；

2、设置其style.display = 'none'及必要属性如action、method、enctype；

3、遍历所有原始表单，对每个可提交元素cloneNode(true)；

4、为每个克隆节点设置唯一name（如添加前缀"user_"、"addr_"）防止覆盖；

5、将克隆节点appendChild至隐藏表单；

6、调用隐藏表单的submit()方法发起请求；

五、使用表单序列化字符串后解析重组

该方法调用表单原生的serialize()（需polyfill）或URLSearchParams构造器将各表单转为查询字符串，再分别解析为对象，最后通过Object.assign或展开运算符合并。适合纯文本字段，不支持文件上传。

1、对每个form元素调用new URLSearchParams(new FormData(form)).toString()；

2、将得到的字符串传入new URLSearchParams()重新解析；

3、使用Object.fromEntries()将URLSearchParams实例转为普通对象；

4、对每个转换后的对象添加命名空间前缀（如user: { name: "a" } → { "user_name": "a" }）；

5、使用Object.assign({}, obj1, obj2, obj3)合并所有带前缀的对象；

6、确保同名字段在不同表单中已通过前缀隔离，否则后出现的值将覆盖先出现的值；

今天关于《HTML5多表单合并提交技巧解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！