问题描述
我的代码:
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发布表单,其发送的正文如下:
I tried to post my form using fetch api, and the body it sends is like:
-----------------------------114782935826962
Content-Disposition: form-data; name="email"
test@example.com
-----------------------------114782935826962
Content-Disposition: form-data; name="password"
pw
-----------------------------114782935826962--
(我不知道为什么边界数每次都会改变发送...)
(I don't know why the number in boundary is changed every time it sends...)
我希望它使用 Content-Type发送数据: application / x-www-form-urlencoded,我该怎么办还是如果我只需要处理它,如何在控制器中解码数据?
I would like it to send the data with "Content-Type": "application/x-www-form-urlencoded", what should I do? Or if I just have to deal with it, how do I decode the data in my controller?
对于谁回答我的问题,我知道我可以做到:
To whom answer my question, I know I can do it with:
fetch("api/xxx", {
body: "email=test@example.com&password=pw",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
method: "post",
}
我想要的东西类似于$(#form)。serialize()在jQuery中(不使用jQuery)或在控制器中解码mulitpart / form-data的方法。
What I want is something like $("#form").serialize() in jQuery (w/o using jQuery) or the way to decode mulitpart/form-data in controller. Thanks for your answers though.
推荐答案
引用(重点是我)上的MDN:
To quote MDN on FormData
(emphasis mine):
因此,当使用 FormData
时,您将自己锁定为 multipart / form-data
。无法将 FormData
对象作为正文发送,而不在 multipart / form-data 格式。
So when using
FormData
you are locking yourself into multipart/form-data
. There is no way to send a FormData
object as the body and not sending data in the multipart/form-data
format.
如果要将数据作为
application / x-www-form-urlencoded ,您要么必须将正文指定为URL编码的字符串,要么传递对象。不幸的是,后者不能直接从
form
元素初始化。如果您不想自己遍历表单元素(您可以可以使用),您还可以创建 URLSearchParams
来自 FormData
对象的对象:
If you want to send the data as
application/x-www-form-urlencoded
you will either have to specify the body as an URL-encoded string, or pass a URLSearchParams
object. The latter unfortunately cannot be directly initialized from a form
element. If you don’t want to iterate through your form elements yourself (which you could do using HTMLFormElement.elements
), you could also create a URLSearchParams
object from a 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
标头本身。
Note that you do not need to specify a
Content-Type
header yourself.
,您还可以创建
URLSearchParams
并传递 FormData
对象,而不是在循环中附加值:
As noted by monk-time in the comments, you can also create
URLSearchParams
and pass the FormData
object directly, instead of appending the values in a loop:
const data = new URLSearchParams(new FormData(formElement));
尽管这在浏览器中仍具有实验性支持,所以请确保在使用前正确测试
This still has some experimental support in browsers though, so make sure to test this properly before you use it.
这篇关于如何使用提取API发布表单数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!