数组方式进行表单提交
今天遇到一个问题,要保存很多表单信息,苦恼了许久,终于发现一个挺不错的方法,以数组的形式把表单中的数据提交至后台进行保存。
其实实现起来很简单,就是给表单中要提交的信息的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 > |
先看看浏览器传递的数据
这个时候后端收到的数据是这样的
得到这样的数据,也很容易将每一组的信息进行归类了。是不是很方便呢,在没有使用这个方法之前,我每次遇到这样的问题都很头疼,现在可以轻松的解决掉了。
本文版权归作者iforever(luluyrt@163.com)所有,未经作者本人同意禁止任何形式的转载,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?