数组方式进行表单提交

原文地址：http://www.cnblogs.com/iforever/p/4222595.html

数组方式进行表单提交

　　今天遇到一个问题，要保存很多表单信息，苦恼了许久，终于发现一个挺不错的方法，以数组的形式把表单中的数据提交至后台进行保存。

　　其实实现起来很简单，就是给表单中要提交的信息的name命名时要有一定的规范，我们先比较下下面这两种方式的差别：

第一种、普通的方式，每个要提交的值都有一个名称

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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

　　服务(index.php)很简单就两句话

1 2 3

<?php echo  "<pre>" ; print_r( $_GET );

　　在渲染好的网页上填入下面信息并点击提交

　　通过浏览器看到的 Query String Paramaters是这样的

　　在服务段会收到这样的信息

　　对与后端来说这样可能不是太好处理，要是能把同一组的三个信息放在一个数组中，是不是就好处理多了，下面再看看另外一种方式

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

< 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发生了变化，在这里看可能还不太明显，当点击提交后会发现传到后端的值整齐多了，看看下面的截图

　　通过浏览器插件解析过的查询字符串是这样的

　　服务端打印出来的数据是这样的：

　　当后台收到这样的数据的时候是不是就好处理多了，省了好多事，当然，这个地方还有要注意的地方，在给要提交的值命名的时候数组中不用加引号，加引号之后后端的键值中会存在引号，这点要注意。还有一点要注意的是，现在更流行的做法是ajax提交，用ajax提交的时候怎么获取表单中的值呢？这个其实也很简单通过jquery提供的serialize()方法可以很方便的将所有要提交的内容拼接成url字符串，然后通过get的方式就可以提交给后台了。

　　当然了，实际中还可能遇到这样的问题，要提交的组数（像上面的1、2、3）是不确定的，可以在前端随意的添加，这个时候怎么去用数组提交这些内容呢？这个还是可以通过合适的明明很便捷的解决掉的，

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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

　先看看浏览器传递的数据

　　　

　这个时候后端收到的数据是这样的

　　

　　得到这样的数据，也很容易将每一组的信息进行归类了。是不是很方便呢，在没有使用这个方法之前，我每次遇到这样的问题都很头疼，现在可以轻松的解决掉了。