如何優雅地提交一個表單

提示：當你看到這個提示的時候，說明當前的文章是由原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 值發生了變化，變成了一樣的？數組？

提交到後端就會發現數據比之前整齊多了
但這裡要注意的是，提交的數組鍵中不需要使用引號，要不然引號也會成為鍵的一部分

當然了，實際中還可能遇到這樣的問題，要提交的組數（像上面的 1、2、3）是不確定的，可以在前端隨意的添加，這個時候怎麼去用數組提交這些內容呢？

下面就是我業務中的實際解決方案

這樣的話，二維數組的鍵則不需要我們自己去維護了，由瀏覽器幫我們自動生成

後端接收到的數據則變成了這樣子，變得非常好處理了

此方法適用於，要提交一堆不確定個數的一組有關的數據對
完結撒花！~

網友評論：

Railgun 丶無限 2 年前 (2019-05-21)
新技能已 get√