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

我的代码：

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--

---

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

---

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

---

---

对于回答我的问题的人，我知道我可以用：

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

---

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

您可以将

body

设置为

URLSearchParams

的实例，并将查询字符串作为参数传递

fetch("/path/to/server", {
  method:"POST"
, body:new URLSearchParams("email=test@example.com&password=pw")
})

---

document.forms[0].onsubmit=async（e）=>{
e、 预防默认值（）；
const params=new URLSearchParams（[…new FormData（e.target）.entries（））；
//fetch（“/path/to/server”，{method:“POST”，body:params}）
const response=等待新的响应（params）.text（）；
控制台日志（响应）；
}

客户端

---

不要设置内容类型标题

// 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; }
}

---

引用（我的重点）：

---

FormData

接口提供了一种方法，可以轻松构建一组表示表单字段及其值的键/值对，然后可以使用

XMLHttpRequest.send（）

方法轻松发送如果编码类型设置为

“多部分/表单数据”

，则它使用与表单相同的格式

---

因此，当使用

FormData

时，您将自己锁定在

multipart/FormData

中。无法将

FormData

对象作为主体发送，也无法不以

multipart/FormData

格式发送数据

---

如果要以

application/x-www-form-urlencoded

的形式发送数据，则必须将主体指定为URL编码的字符串，或者传递一个对象。不幸的是，后者不能从

表单

元素直接初始化。如果您不想自己迭代表单元素（您可以使用它），还可以从

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(…);

---

请注意，您不需要自己指定

内容类型

标题

---

---

如注释中所述，您还可以创建

URLSearchParams

并直接传递

FormData

对象，而不是在循环中附加值：

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

---

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

使用

FormData

和

fetch

获取和发送数据

fetch(form.action, {method:'post', body: new FormData(form)});

---

函数发送（e，表单）{
fetch（form.action，{method:'post'，body:newformdata（form）}）；
log（“我们异步发送post（AJAX）”；
e、 预防默认值（）；
}

在“提交”之前/之后查看chrome控制台>网络，以使用fetch api发布表单数据，
试试这个代码它对我有用^_^

function card(fileUri) {
let body = new FormData();
let formData = new FormData();
formData.append('file', fileUri);

fetch("http://X.X.X.X:PORT/upload",
  {
      body: formData,
      method: "post"
  });
 }

将其用于JSON api：

发送POST请求
发送GET请求
发送删除请求
发送PUT请求
要添加上面的好答案，还可以避免在HTML中显式设置操作，并在javascript中使用事件处理程序，使用“this”作为表单来创建“FormData”对象

Html格式：

<form id="mainForm" class="" novalidate>
<!--Whatever here...-->
</form>

使用fetch api，您不必包含标题“内容类型”：“多部分/表单数据”

因此，以下工作：

let formData = new FormData()
formData.append("nameField", fileToSend)

fetch(yourUrlToPost, {
   method: "POST",
   body: formData
})

请注意，对于axios，我必须使用内容类型。
使用
FormData
有什么问题？我想将其发布为“电子邮件”=test@example.com&密码=pw”。有可能吗？“我不知道为什么边界中的数字每次发送时都会更改…”-边界标识符只是一个随机标识符，它可以是任何东西，本身没有任何意义。因此，在那里选择一个随机数（这是客户端通常做的事情）并没有什么错。虽然这样做有效，但它不会像OP所要求的那样以
application/x-www-form-urlencoded
的形式发送数据。对我来说，当我从标题中删除
Content Type
并让浏览器自动执行时，它就起作用了。谢谢如果您没有为Fetch设置“Content type”，它会将其设置为
多部分/表单数据
，这就是表单数据应该设置的！然后，您可以在expressjs中使用
multer
轻松解析该数据格式。
Reflect.apply（params.set，params，props）
是一种特别不可读的方式，表示
params.set（props[0]，props[1]）
@poke
Reflect.apply（params.set，params，props）
从这里的角度来看是可读的。这似乎是这里唯一有效的答案：/谢谢！：）如果我在body:new-URLSearchParams（“img=“+my5MBimage”）@PYK上发送一个5MB图像文件会怎么样？在这种情况下，您不能使用application/x-www-form-urlencoded，但可以使用多部分/表单数据：您也可以直接在构造函数中使用对象或只使用
FormData
，而不是循环：
new-URLSearchParams（new-FormData（formElement））
@monk time在编写该答案时，
URLSearchParams
的构造函数参数非常新，支持非常有限。很抱歉，这不是抱怨，只是给将来阅读此内容的每个人的一个提示。@Prasanth您可以自己明确指定内容类型，但必须选择正确的内容类型。不使用它，让
fetch
为您处理它更容易。@chovy
URLSearchParams
作为一个全局对象内置于大多数现代浏览器中，也可以在节点上工作。只使用代码的答案通常可以通过添加一些关于它们如何工作以及为什么工作的解释来改进。当用现有答案为两年前的问题添加答案时，重要的是
function remove() {
  return fetch(web_api, {
    method: "DELETE"
  }).then(response => {
    if (!response.ok) {
      throw new Error("There was an error processing the request");
    }
  });
}

function updateTodo() {
    return fetch(web_api, {
      method: "PUT",
      body: JSON.stringify(todo),
      headers: {
        "Content-Type": "application/json",
      },
    }).then((response) => {
      if (!response.ok) {
         throw new Error("There was an error processing the request");
      }
    });
}

<form id="mainForm" class="" novalidate>
<!--Whatever here...-->
</form>

$("#mainForm").submit(function( event ) {
  event.preventDefault();
  const formData = new URLSearchParams(new FormData(this));
  fetch("http://localhost:8080/your/server",
    {   method: 'POST',
        mode : 'same-origin',
        credentials: 'same-origin' ,
        body : formData
    })
    .then(function(response) {
      return response.text()
    }).then(function(text) {
        //text is the server's response
    });
});

let formData = new FormData()
formData.append("nameField", fileToSend)

fetch(yourUrlToPost, {
   method: "POST",
   body: formData
})