关于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));