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

我的代码：

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",
}

我想要的是像$(“#form”).jQuery中的serialize()(没有使用jQuery)或者在控制器中解码mulitpart / form-data的方法.谢谢你的回答.

解决方法:

引用MDN on FormData(强调我的)：

The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".

因此,在使用FormData时,您将自己锁定为multipart / form-data.无法将FormData对象作为正文发送,也无法以multipart / form-data格式发送数据.

如果要将数据作为application / x-www-form-urlencoded发送,则必须将主体指定为URL编码的字符串,或者传递URLSearchParams对象.遗憾的是,后者无法从表单元素直接初始化.如果您不想自己遍历表单元素(可以使用HTMLFormElement.elements进行迭代),还可以从FormData对象创建URLSearchParams对象：

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标头.

如注释中的monk-time所述,您还可以创建URLSearchParams并直接传递FormData对象,而不是将值附加到循环中：

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

这仍然在浏览器中有一些实验支持,因此请确保在使用之前正确测试.

标签：fetch-api,javascript
来源： https://codeday.me/bug/20190917/1809255.html