如何使用提取API发布表单数据？

Question

我的代码：

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发布表单，其发送的正文如下：

-----------------------------114782935826962

Content-Disposition: form-data; name="email"

[e-mail]

-----------------------------114782935826962

Content-Disposition: form-data; name="password"

pw

-----------------------------114782935826962--

（我不知道为什么每次发送时边界数字都会更改...）

我希望它使用“ Content-Type”：“ application / x-www-form-urlencoded”发送数据，我该怎么办？或者，如果我只需要处理它，该如何在控制器中解码数据？

向谁回答我的问题，我知道我可以做到：

fetch("api/xxx", {

    body: "email=[e-mail]&password=pw",

    headers: {

        "Content-Type": "application/x-www-form-urlencoded",

    },

    method: "post",

}

我想要的是类似jQuery中的$（“＃form”）。serialize（）（不使用jQuery）或在控制器中解码mulitpart / form-data的方法。谢谢您的回答。

Answer 1

引用（强调我的）MDNFormData：该FormData接口提供了一种轻松构造一组代表表单字段及其值的键/值对的XMLHttpRequest.send()方法，然后可以使用该方法轻松发送该键/值对。如果编码类型设置为，则使用与表单相同的格式"multipart/form-data"。因此，使用时FormData您将自己锁定在multipart/form-data。无法将FormData对象作为主体发送，也不能以该multipart/form-data格式发送数据。如果要发送数据，则application/x-www-form-urlencoded必须将正文指定为URL编码的字符串，或者传递一个URLSearchParams对象。不幸的是，后者不能直接从form元素初始化。如果您不想自己遍历表单元素（可以使用进行遍历HTMLFormElement.elements），则还可以URLSearchParams从FormData对象创建对象：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对象，而不是将值附加到循环中：const data = new URLSearchParams(new FormData(formElement));不过，它在浏览器中仍具有一些实验性的支持，因此请确保在使用前对其进行正确测试。

Answer 2

客户不要设置内容类型标题。// Build formData object.let formData = new FormData();formData.append('name', 'John');formData.append('password', 'John123');fetch("api/SampleData",    {        body: formData,        method: "post"    });服务器使用该FromForm属性可以指定绑定源是表单数据。[Route("api/[controller]")]public class SampleDataController : Controller{    [HttpPost]    public IActionResult Create([FromForm]UserDto dto)    {        return Ok();    }}public class UserDto{    public string Name { get; set; }    public string Password { get; set; }}

Answer 3

您可以将设置body为URLSearchParams带有作为参数传递的查询字符串的的实例fetch("/path/to/server", {&nbsp; method:"POST", body:new URLSearchParams("email=[e-mail]&password=pw")})document.forms[0].onsubmit = async(e) => {&nbsp; e.preventDefault();&nbsp; const params = new URLSearchParams([...new FormData(e.target).entries()]);&nbsp; // fetch("/path/to/server", {method:"POST", body:params})&nbsp; const response = await new Response(params).text();&nbsp; console.log(response);}<form>&nbsp; <input name="email" value="[e-mail]">&nbsp; <input name="password" value="pw">&nbsp; <input type="submit"></form>