关于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还是数组，后端如何全部接收这些参数？

参考： Map<String, Object> result = (Map<String, Object>) JSONObject.toBean(JSONObject.fromObject(jsonString));