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值发生了变化,变成了一样的 ?数组?
提交到后端就回发现数据比之前整齐多了
但这里要注意的是,提交的数组键中不需要使用引号,要不然引号也会成为键的一部分
当然了,实际中还可能遇到这样的问题,要提交的组数(像上面的1、2、3)是不确定的,可以在前端随意的添加,这个时候怎么去用数组提交这些内容呢?
下面就是我业务中的实际解决方案
这样的话,二维数组的键则不需要我们自己去维护了,由浏览器帮我们自动生成
后端接收到的数据则变成了这样子,变得非常好处理了
此方法适用于,要提交一堆不确定个数的一组有关的数据对
完结撒花!~ 本博客所有文章 如无特别注明 均为原创。 作者: 阿珏 , 复制或转载请 以超链接形式 注明转自 阿珏博客 。
原文地址《 如何优雅的提交一个表单 》
网友评论:
标签:name,提交,优雅,阿珏,数组,input,表单 From: https://www.cnblogs.com/Ajue/p/18202463Railgun丶无限 2年前 (2019-05-21)
新技能已get√