我的代码:

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-urlencode"的数据,我应该怎么做?或者,如果我只需要处理它,我该如何解码控制器中的数据呢?


对于谁回答我的问题,我知道我可以做到:

fetch("api/xxx", {
    body: "email=test@example.com&password=pw",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "post",
}

我想要的是美元之类的东西.在jQuery中序列化()(不使用jQuery)或在控制器中解码多部分/表单数据的方法.谢谢你的回答.

推荐答案

引用MDN on FormData(我的重点):

100接口提供了一种轻松构造一组表示表单域及其值的键/值对的方法,然后可以使用XMLHttpRequest.send()方法轻松地发送这些值.It uses the same format a form would use if the encoding type were set to 102.

所以当使用FormData时,你就把自己锁定在了multipart/form-data.无法发送FormData个对象作为主体,发送multipart/form-data格式的数据.

如果希望将数据作为application/x-www-form-urlencoded发送,则必须将正文指定为URL编码的字符串,或者传递URLSearchParams对象.不幸的是,后者不能从form元素直接初始化.如果您不想自己遍历表单元素(could使用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));

不过,这在浏览器中仍然有一些实验性支持,所以请确保在使用它之前对其进行适当的测试.

Javascript相关问答推荐

同步功能在中间停止

即使设置了父级的最大高度,固定位置的分区内容也不会滚动?

使用NgDeliverentOutlet和动态内容投影的Angular 渲染组件

创建私有JS出口

如何修复内容安全策略指令脚本-SRC自身错误?

我开始使用/url?q=使用Cheerio

被CSS优先级所迷惑

使用复选框在d3.js多折线图中添加或删除线条

如何从Intl.DateTimeFormat中仅获取时区名称?

如何强制Sphinx中的自定义js/css文件始终加载更改而不缓存?

第二次更新文本输入字段后,Reaction崩溃

第三方包不需要NODE_MODULES文件夹就可以工作吗?

邮箱密码重置链接不适用于已部署的React应用程序

如何 for each 输入动态设置输入变更值

删除加载页面时不存在的元素(JavaScript)

JavaScript:如果字符串不是A或B,则

不同表的条件API端点Reaction-redux

不协调嵌入图片

为什么我看到的是回复,而不是我的文档?

在Java脚本中构建接口的对象