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

小编典典

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

all

我的代码：

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"

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 的方式。不过感谢您的回答。

阅读 68

2022-05-24

共1个答案

小编典典

引用MDNFormData（强调我的）：

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

因此，在使用时，FormData您将自己锁定在multipart/form-data. 没有办法将FormData对象作为主体发送
而不multipart/form-data以格式发送数据。

如果要发送数据，application/x-www-form-urlencoded则必须将正文指定为 URL
编码的字符串，或者传递一个URLSearchParams对象。不幸的是，后者不能直接从form元素初始化。如果您不想自己遍历表单元素（您
可以使用来完成HTMLFormElement.elements），您还可以URLSearchParams从对象创建FormData对象：

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

正如评论中所指出的，您还可以直接创建URLSearchParams和传递FormData对象，而不是在循环中附加值：

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

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

2022-05-24