如何优雅的提交一个表单

Tips：当你看到这个提示的时候，说明当前的文章是由原emlog博客系统搬迁至此的，文章发布时间已过于久远，编排和内容不一定完整，还请谅解`

如何优雅的提交一个表单

日期：2019-5-6 阿珏折腾代码浏览：1734次评论：1条

这是一个非常基础的HTML表单提交问题，但却是一个非常实用的技巧
我的业务场景是这样的：

一个可动态创建input的表单，如下图

这意味着input的name不能是一个固定的，要不然肯定会被覆盖掉的

第一种，传统的普通的提交方式，给每一个要提交的input一个唯一的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>

浏览器提交抓到的格式是这样子的

服务器获取打印出来的是这样的，对后端的数据处理就非常不友好

第二种，数组的方式进行表单提交

<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>

浏览器和后端打印的分别为

细心观察就回发现，提交的name值发生了变化，变成了一样的？数组？