首页 >web前端 >js教程 >如何使用 Fetch API 以 `application/x-www-form-urlencoded` 形式发送表单数据?

如何使用 Fetch API 以 `application/x-www-form-urlencoded` 形式发送表单数据?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-04 15:34:02670浏览

How to Send Form Data as `application/x-www-form-urlencoded` with the Fetch API?

使用 Application/x-www-form-urlencoded 通过 Fetch API 发布表单数据

提交表单时,您可能会遇到如何发送表单数据的问题使用 Fetch API 获取数据。默认情况下,使用 FormData 发送正文会导致数据作为 multipart/form-data 发送。但是,如果您希望以 application/x-www-form-urlencoded 的形式发送数据,则有几个选项可用。

具有 Multipart/Form-Data 格式的 FormData

使用 FormData自动锁定您以多部分/表单数据格式发送数据。为了避免这种情况,您可以手动创建 URL 编码的字符串或 URLSearchParams 对象,而不是使用 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 标头。

URLSearchParams 和 FormData

另一个实验性选项是创建 URLSearchParams 对象并直接传递 FormData 对象,而不是循环遍历值:

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

虽然此方法有一些实验支持在浏览器中,建议在使用前彻底测试。

以上是如何使用 Fetch API 以 `application/x-www-form-urlencoded` 形式发送表单数据?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn