formdata 嵌套_form表单的嵌套问题

在做项目中使用到了表单的嵌套，很自然的就在一个表单里嵌套了另外一个表单，当在向后台提交数据的时候发现嵌套在里面的表单的数据拿不到，于是写了一个例子来总结在项目中遇到的问题

代码如下

姓名

年龄

职业

性别

男

女

爱好

游泳

拳击

打篮球

踢足球

提交

效果如下：

@1：当我对最外层的表单进行序列化时得到的结果如下

@2：当我对内层的表单进行序列化时得到如下的结果

由@1与@2的图比较可知，内层表单并没有获取到值，百思不得解，就去元素里查看了一下

只显示了外层的form表单，内层的form表单并没有显示出来

展开元素你会发现，原来属于内层表单的元素现在都归到了外层表单里，这也导致了，提交按钮样式混乱的原因

所以在我序列化内层表单时，获得的才是空的数组

由以上得出结论，表单是不能嵌套的

但有时候需要用到表单的嵌套怎么办？比如：我用序列化表单提交数据，但是里面还包含上传图片显示的问题，因为要兼容ie8，就把图片用表单提交的形式提交数据，这时候就用到了表单的嵌套，解决办法就是，上传文件时弹出一个模态框，在模态框里进行文件的上传(就是以表单的形式提交数据)，然后再把得到的数据复制到表单的一个字段里