关于Formdata的使用心得

发布时间:2026/9/21 16:53:43
关于Formdata的使用心得 前言最近有一次做项目迁移时发现老版前端代码中是将数据封装在form表单中然后将数据发送到后端。遇见了一个奇怪的现象form表单中可以发送两个相同名称的字段后端使用request接收时会以数组的形式接收。但是我是使用ajax发送请求JavaScript对象中属性肯定是唯一的如果使用js对象作为请求数据的载体肯定无法完成这个需求我就想到的formData。正文1、通过fetch发送formdata请求在前端通过ajax或者fetch发送请求时我们更习惯把数据存在放formData中。存放方式如下//这是通过fetch发送请求request只是在外层包装了一下 async function checkboxSingle(param) { let formData new FormData(); formData.append(name,lis); formData.append(name,sxl); return new Promise(resolve { let url http://127.0.0.1:8080/checkbox/multiply; request(url,{ method:POST, model:no-cors, withCredentials: false, body:formData }).then(res{ resolve(res); }); }) }细心的你肯定发现了我在formdata中存放了name两次即value相同key不同。去页面的network看一下就会明白formdata中是允许这么存放的。后端怎么接收呢当然是以数组的形式接收如下图所示注意在JavaScript中创建的对象或者当然是键唯一的。比如JavaScript数组中有name。通过user[‘name’]‘zhangs’;user[‘name’]‘lis’;最终的结果只会显示lis。这个和formdata是有区别的。通过ajax发送formdata数据的请求也可以按照上述方式使用formData对象发送数据。扩展思考如果前端请求数据是动态的无法确定有几个参数而且无法确定参数类型是String还是数组后端如何全部接收这些参数参考 MapString, Object result (MapString, Object) JSONObject.toBean(JSONObject.fromObject(jsonString));

关于本文作者

来自尧图内容编辑团队

尧图内容编辑团队 内容团队

尧图内容编辑团队

本文由尧图网络内容编辑团队执笔。团队由资深项目经理、前端工程师与设计师组成,所有内容均来自亲手交付的真实项目,先讲清问题、再给出可落地的解法。尧图深耕北京网站建设十年,服务过京华建材集团、智造科技等各行业客户,把一线经验沉淀为可复用的行业观察。

  • 十年建站经验,覆盖建材、制造、服务、文创等
  • 项目经理把关选题与事实准确性
  • 工程师与设计师联合撰写专业细节
  • 统一编辑规范,保证文风与排版一致
  • 每月复盘转化数据,迭代选题方向

延伸阅读

相关资讯与近期热门内容

深度阅读推荐

建站决策前值得细读的三篇

网站改版的5个关键决策
2024-08-12

网站改版的5个关键决策

什么时候该改版、改到什么程度、如何避免流量掉光,京华建材集团改版复盘给出答案。

获取专属建站方案

看完文章,把您的行业与预算告诉我们,免费获取一份量身定制的官网建设方案与报价。

立即免费咨询