如何使用提取API发布表单数据？

小编典典

如何使用提取API发布表单数据？

ajax

我的代码：

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的方法。谢谢您的回答。

阅读 277

2020-07-26

共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));

尽管它在浏览器中仍具有一些实验性支持，所以请确保在使用前对其进行正确测试。

2020-07-26