首页 > 其他分享 >如何优雅的提交一个表单

如何优雅的提交一个表单

时间:2024-05-20 17:31:10浏览次数:20  
标签:name 提交 优雅 阿珏 数组 input 表单

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)是不确定的,可以在前端随意的添加,这个时候怎么去用数组提交这些内容呢?
下面就是我业务中的实际解决方案
这样的话,二维数组的键则不需要我们自己去维护了,由浏览器帮我们自动生成

后端接收到的数据则变成了这样子,变得非常好处理了

此方法适用于,要提交一堆不确定个数的一组有关的数据对
完结撒花!~ 本博客所有文章 如无特别注明 均为原创。 作者: 阿珏 , 复制或转载请 以超链接形式 注明转自 阿珏博客
原文地址《 如何优雅的提交一个表单








网友评论:

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

标签:name,提交,优雅,阿珏,数组,input,表单
From: https://www.cnblogs.com/Ajue/p/18202463

相关文章

  • 网页布局------for表单
     1、基础语法<form></form> (1)表单类型:email:能够验证当前输⼊的邮箱地址是否合法url:验证URLnumber:只能输⼊数字,其他输⼊不了,⽽且⾃带上下增⼤减⼩箭头,max属性可以设置为最⼤值,min可以设置为最⼩值,value为默认值。search:输⼊框后⾯会给提供⼀个⼩叉,可以删除输⼊......
  • 【JAVA】BOSS系统发版艺术:构建高效、优雅的微服务部署策略
    在现代软件开发领域,微服务架构与容器化部署已迅速成为行业新趋势。微服务架构通过将应用拆分成多个小型、自治的服务单元,每个服务承担某项特定的业务功能。而容器化部署则以其轻量级和高度可移植的特性,为这些微服务的有效打包、分发和运行提供了强大支持。在这样的环境中,实现微服......
  • angular - 表单
    (1)模板驱动表单参考:构建模板驱动表单简单表单​ngForm​固定的,需要提交的值ngModel​<form#sub="ngForm"(submit)="onSubmit(sub)"><inputtype="text"name="username"ngModel><inputtype="id"name=......
  • 【uniapp 篇 】动态添加 表单,所添加元素展示在同一行
    动态添加表单,所添加元素展示在同一行1<uni-formslabelWidth="68px">23<uni-forms-itemv-for="(item,index)inbaseFormData.dynamicTable.timeField.array"4......
  • java中的http请求的封装(GET、POST、form表单形式)
    前JAVA实现HTTP请求的方法用的最多的有两种:一种是通过HTTPClient这种第三方的开源框架去实现。HTTPClient对HTTP的封装性比较不错,通过它基本上能够满足我们大部分的需求,HttpClient3.1是org.apache.commons.httpclient下操作远程url的工具包,虽然已不再更新,但实现工作中使用httpC......
  • spark-submit 提交的参数
    spark-submit是用于提交Spark应用到集群的命令行工具。它允许用户控制Spark应用的各种参数,比如应用名、集群URL、运行模式、资源分配等。以下是一些常用的spark-submit参数:--master:指定Spark集群的URL,例如local,local[*],spark://23.195.26.187:7077,yarn,mesos等。--d......
  • form 表单查询本身存在转义字符的处理
    碰到的问题是 查询的时候填写这样的字符串:packageCenter/xxxx?scene=t%3Dp_c67bd3exxxxxxxxx用php的自带的超全局变量 $_GET获取到的是解码后的的字符串:packageCenter/xxxx?scene=t=p_c67bd3exxxxxxxxx。解决方案:使用$_SERVER['QUERY_STRING']来获取未解码前的查询字......
  • VueJS-表单构建指南-全-
    VueJS表单构建指南(全)原文:zh.annas-archive.org/md5/89D4502ECBF31F487E1AF228404A6AC0译者:飞龙协议:CCBY-NC-SA4.0前言Vue.js是世界领先和增长最快的前端开发框架之一。其平缓的学习曲线和充满活力和乐于助人的社区使其成为许多新开发人员寻求利用前端框架的力量的不二......
  • 如何摆脱[自我/当下]而考虑到[别人/将来],从而主动为群体和将来行动 在学习通提交解
    培养同理心:尝试从他人的角度看待问题,理解他们的感受和需求。倾听他人:积极倾听并尊重他人的观点和意见,这有助于你更好地理解他们。拓宽视野:阅读、旅行和学习新事物可以帮助你了解不同的观点和文化。长期规划:设定长期目标,并考虑这些目标如何影响你的未来和他人。合作......
  • 比较不同团队的绩效评估方法;提出自己团队的绩效评估计划在学习通提交解答的同时,可以
    ]比较不同团队的绩效评估方法;提出自己团队的绩效评估计划在学习通提交解答的同时,可以同步发布在团队和个人博客上,作为学习心得体会,记录下来【第二组】答:不同团队的绩效评估方法会因公司文化、业务需求和团队特点而有所不同。以下是一些常见的团队绩效评估方法,以及可能适用于你......