表单的提交 “数组的整合”

前段时间工作中遇到的问题：后端要求使用form表单提交到后台的数据为一组整合的数据，接下来看如何将form表单的数据以数组的方式提交到后台：

1、普通方式：给每个form表单可检测的标签命名不同的name即可：

<form id="form1" action="./index.php" method="get">
    <div class="form-control">
        <input type="text" name="name1" />
        <input type="text" name="num1" />
        <input type="text" name="img1" />
    </div>
    <br>
    <div class="form-control">
        <input type="text" name="name2" />
        <input type="text" name="num2" />
        <input type="text" name="img2" />
    </div>
    <br>
    <div class="form-control">
        <input type="text" name="name3" />
        <input type="text" name="num3" />
        <input type="text" name="img3" />
    </div>
    ......
  <input type="submit" value="Submit" />
</form>

浏览器展现提交的数据：

服务器端展现的数据为： 

这样的数据对于后端可能还需要进一步的处理：前端同志只需添加个数组就好许多了，

2、数组的方式进行表单提交（将属于一组的数据归归为一类提交）

<form id="form1" action="./index.php" method="get">
    <div class="form-control">
        <input type="text" name="infos[1][name]" />
        <input type="text" name="infos[1][num]" />
        <input type="text" name="infos[1][img]" />
    </div>
    <br>
    <div class="form-control">
        <input type="text" name="infos[2][name]" />
        <input type="text" name="infos[2][num]" />
        <input type="text" name="infos[2][img]" />
    </div>
    <br>
    <div class="form-control">
        <input type="text" name="infos[3][name]" />
        <input type="text" name="infos[3][num]" />
        <input type="text" name="infos[3][img]" />
    </div>
    ......
  <input type="submit" value="Submit" />
</form>

               

3、数组方式提交（单个字段合并为一个数组提交）：

<form id="form1" action="./index.php" method="get">
    <div class="form-control">
        <input type="text" name="infos[name][]" />
        <input type="text" name="infos[num][]" />
        <input type="text" name="infos[img][]" />
    </div>
    <br>
    <div class="form-control">
        <input type="text" name="infos[name][]" />
        <input type="text" name="infos[num][]" />
        <input type="text" name="infos[img][]" />
    </div>
    <br>
    <div class="form-control">
        <input type="text" name="infos[name][]" />
        <input type="text" name="infos[num][]" />
        <input type="text" name="infos[img][]" />
    </div>
    ......
  <input type="submit" value="Submit" />
</form>

 同上：

  

实际开发中也就这三种方式的相互嵌套，相信大家会深有体感，如果哪有不解，请留言告知