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

我的代码:

获取(“api/xxx”{
正文:新表单数据(document.getElementById(“表单”),
标题:{
“内容类型”:“应用程序/x-www-form-urlencoded”,
//“内容类型”:“多部分/表单数据”,
},
方法:“张贴”,
}

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

------------------------------------114782935826962
内容处置:表单数据;name=“电子邮件”
[email protected]
-----------------------------114782935826962
内容处置:表单数据;name=“密码”
嗯
-----------------------------114782935826962--

(我不知道为什么每次发送时边界中的数字都会改变…)

我希望它以“内容类型”发送数据:“application/x-www-form-urlencoded”,我该怎么做?或者如果我必须处理它,我该如何解码控制器中的数据


对于回答我的问题的人,我知道我可以用:

获取(“api/xxx”{
正文:“电子邮件[email protected]&password=pw“,
标题:{
“内容类型”:“应用程序/x-www-form-urlencoded”,
},
方法:“张贴”,
}

我想要的是类似于jQuery中的$(“#form”).serialize()的东西(使用jQuery进行w/o操作),或者是在controller中解码多部分/表单数据的方法。谢谢您的回答

要在FormData中引用MDN(重点是我的):

FormData接口提供了一种方法,可以轻松构造一组表示表单字段及其值的键/值对,然后可以使用XMLHttpRequest.send()方法轻松发送。它使用的格式与将编码类型设置为“多部分/表单数据”

因此,当使用FormData时,您将自己锁定在multipart/form data中。无法将FormData对象作为主体发送,也无法以multipart/form data格式发送数据

如果要将数据作为application/x-www-form-urlencoded发送,则必须将正文指定为URL编码字符串,或传递URLSearchParams对象。不幸的是,后者无法从表单元素直接初始化。如果不想迭代表单元素,请返回您的表单元素elf(您可以使用HTMLFormElement.elements执行此操作),您还可以从FormData对象创建URLSearchParams对象:

常量数据=新的URLSearchParams();
for(新FormData(formElement)的常量对){
data.append(对[0],对[1]);
}
获取(url{
方法:“post”,
正文:数据,
})
.然后(…);

请注意,您不需要自己指定内容类型标题


正如monk time在评论中指出的,您还可以创建URLSearchParams并直接传递FormData对象,而不是在循环中附加值:

const data=新的URLSearchParams(新的FormData(formElement));

不过,这在浏览器中仍然有一些实验性的支持,所以在使用它之前,请确保正确地测试它

发表评论