今天遇到一個(gè)問(wèn)題，要保存很多表單信息，苦惱了許久，終于發(fā)現(xiàn)一個(gè)挺不錯(cuò)的方法，以數(shù)組的形式把表單中的數(shù)據(jù)提交至后臺(tái)進(jìn)行保存。

　　其實(shí)實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，就是給表單中要提交的信息的name命名時(shí)要有一定的規(guī)范，我們先比較下下面這兩種方式的差別：

第一種、普通的方式，每個(gè)要提交的值都有一個(gè)名稱

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

　　服務(wù)(index.php)很簡(jiǎn)單就兩句話

<?phpecho "<
　　在渲染好的網(wǎng)頁(yè)上填入下面信息并點(diǎn)擊提交
　　通過(guò)瀏覽器看到的 Query String Paramaters是這樣的
　　在服務(wù)段會(huì)收到這樣的信息
　　對(duì)與后端來(lái)說(shuō)這樣可能不是太好處理，要是能把同一組的三個(gè)信息放在一個(gè)數(shù)組中，是不是就好處理多了，下面再看看另外一種方式
第二種、數(shù)組的方式進(jìn)行表單提交
<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>
　　細(xì)心看看就會(huì)發(fā)現(xiàn)，要提交的數(shù)據(jù)的名字name發(fā)生了變化，在這里看可能還不太明顯，當(dāng)點(diǎn)擊提交后會(huì)發(fā)現(xiàn)傳到后端的值整齊多了，看看下面的截圖
　　通過(guò)瀏覽器插件解析過(guò)的查詢字符串是這樣的
　　服務(wù)端打印出來(lái)的數(shù)據(jù)是這樣的：
　　當(dāng)后臺(tái)收到這樣的數(shù)據(jù)的時(shí)候是不是就好處理多了，省了好多事，當(dāng)然，這個(gè)地方還有要注意的地方，在給要提交的值命名的時(shí)候數(shù)組中不用加引號(hào)，加引號(hào)之后后端的鍵值中會(huì)存在引號(hào)，這點(diǎn)要注意。還有一點(diǎn)要注意的是，現(xiàn)在更流行的做法是Ajax提交，用ajax提交的時(shí)候怎么獲取表單中的值呢？這個(gè)其實(shí)也很簡(jiǎn)單通過(guò)jquery提供的serialize()方法可以很方便的將所有要提交的內(nèi)容拼接成url字符串，然后通過(guò)get的方式就可以提交給后臺(tái)了。
　　當(dāng)然了，實(shí)際中還可能遇到這樣的問(wèn)題，要提交的組數(shù)（像上面的1、2、3）是不確定的，可以在前端隨意的添加，這個(gè)時(shí)候怎么去用數(shù)組提交這些內(nèi)容呢？這個(gè)還是可以通過(guò)合適的明明很便捷的解決掉的，
<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>
　先看看瀏覽器傳遞的數(shù)據(jù)
　　　
　這個(gè)時(shí)候后端收到的數(shù)據(jù)是這樣的
　　
　　得到這樣的數(shù)據(jù)，也很容易將每一組的信息進(jìn)行歸類了。是不是很方便呢，在沒(méi)有使用這個(gè)方法之前，我每次遇到這樣的問(wèn)題都很頭疼，現(xiàn)在可以輕松的解決掉了。
　　本文版權(quán)歸作者iforever(luluyrt@163.com)所有，未經(jīng)作者本人同意禁止任何形式的轉(zhuǎn)載，轉(zhuǎn)載文章之后必須在文章頁(yè)面明顯位置給出作者和原文連接，否則保留追究法律責(zé)任的權(quán)利。