如何使用 fetch api 发布表单数据？

My code:

fetch("api/xxx", {
    body: new FormData(document.getElementById("form")),
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        // "Content-Type": "multipart/form-data",
    },
    method: "post",
}

我尝试使用 fetch api 发布我的表单，它发送的正文如下：

-----------------------------114782935826962
Content-Disposition: form-data; name="email"

[email protected] /cdn-cgi/l/email-protection
-----------------------------114782935826962
Content-Disposition: form-data; name="password"

pw
-----------------------------114782935826962--

（不知道为什么boundary里的数字每次发送都会变……）

我希望它发送“Content-Type”：“application/x-www-form-urlencoded”的数据，我该怎么办？或者，如果我只需要处理它，如何解码控制器中的数据？

对于谁回答我的问题，我知道我可以这样做：

fetch("api/xxx", {
    body: "[email protected] /cdn-cgi/l/email-protection&password=pw",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "post",
}

我想要的是 jQuery 中的 $("#form").serialize() 之类的东西（不使用 jQuery）或在控制器中解码多部分/表单数据的方法。不过还是谢谢你的回答。

去引用MDN on FormData https://developer.mozilla.org/en-US/docs/Web/API/FormData（强调我的）：

The FormData接口提供了一种轻松构建一组表示表单字段及其值的键/值对的方法，然后可以使用XMLHttpRequest.send()方法。如果编码类型设置为，它使用的格式与表单使用的格式相同"multipart/form-data".

所以使用时FormData你把自己锁在了multipart/form-data。没有办法发送FormData物体作为身体和not发送数据在multipart/form-data format.

如果您想将数据发送为application/x-www-form-urlencoded您要么必须将正文指定为 URL 编码的字符串，要么传递一个URLSearchParams https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams目的。不幸的是后者不能直接从form元素。如果您不想自己迭代表单元素（您可以could做使用HTMLFormElement.elements https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements），您还可以创建一个URLSearchParams对象从一个FormData object:

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自己标头。

正如所指出的和尚时间 https://stackoverflow.com/users/6270692/monk-time在评论中，您还可以创建URLSearchParams并通过FormData直接对象，而不是在循环中附加值：

const data = new URLSearchParams(new FormData(formElement));

不过，这在浏览器中仍然有一些实验性支持，因此请确保在使用它之前对其进行正确测试。