我的代码:
fetch("api/xxx", { body: new FormData(document.getElementById("form")), headers: { "Content-Type": "application/x-www-form-urlencoded", // "Content-Type": "multipart/form-data", }, method: "post", }
我尝试使用提取API发布表单,其发送的正文如下:
-----------------------------114782935826962 Content-Disposition: form-data; name="email" test@example.com -----------------------------114782935826962 Content-Disposition: form-data; name="password" pw -----------------------------114782935826962--
(我不知道为什么每次发送时边界数字都会更改…)
我希望它使用“ Content-Type”:“ application / x-www-form- urlencoded”发送数据,我该怎么办?或者,如果我只需要处理它,如何在控制器中解码数据?
向谁回答我的问题,我知道我可以做到:
fetch("api/xxx", { body: "email=test@example.com&password=pw", headers: { "Content-Type": "application/x-www-form-urlencoded", }, method: "post", }
我想要的是类似jQuery中的$(“#form”)。serialize()(不使用jQuery)或在控制器中解码mulitpart / form- data的方法。谢谢您的回答。
引用(强调我的)MDNFormData:
FormData
该 FormData 接口提供了一种轻松构造一组代表表单字段及其值的键/值对的XMLHttpRequest.send()方法,然后可以使用该方法轻松发送该键/值对。 如果编码类型设置为,则其格式与表单使用的格式相同"multipart/form-data"。
XMLHttpRequest.send()
"multipart/form-data"
因此,使用时FormData您将自己锁定在multipart/form-data。无法将FormData对象作为正文发送并且 不 发送multipart/form-data格式的数据。
multipart/form-data
如果要发送数据,则application/x-www-form- urlencoded必须将正文指定为URL编码的字符串,或者传递一个URLSearchParams对象。不幸的是,后者不能直接从form元素初始化。如果您不想自己遍历表单元素( 可以使用进行遍历HTMLFormElement.elements),则还可以URLSearchParams从FormData对象创建一个对象:
application/x-www-form- urlencoded
URLSearchParams
form
HTMLFormElement.elements
const data = new URLSearchParams(); for (const pair of new FormData(formElement)) { data.append(pair[0], pair[1]); } fetch(url, { method: 'post', body: data, }) .then(…);
请注意,您无需自己指定Content-Type标题。
Content-Type
可以直接创建URLSearchParams和传递FormData对象,而不是将值附加到循环中:
const data = new URLSearchParams(new FormData(formElement));
尽管它在浏览器中仍具有一些实验性支持,所以请确保在使用前对其进行正确测试。