使用FormData和fetch来抓取和发送数据

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

函数send(e,form) { fetch(形式。action，{方法:'post'， body: new FormData(form)}); console.log('我们异步发送帖子(AJAX)'); e.preventDefault (); ｝ <form method="POST" action="myapi/send" onsubmit="send(event,this) "" > <input hidden name="csrfToken" value="a1e24s1"> <input name="email" value="a@b.com"> <input name="phone" value="123-456-789"> < input type = " submit " > > < /形式 在chrome控制台>网络之前/之后“提交”

为了补充上述好的答案，你也可以避免在HTML中显式设置动作，并使用javascript中的事件处理程序，使用"this"作为表单来创建"FormData"对象

Html表格:

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

在JS中:

$("#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
    });
});

使用fetch api，你不需要包含“Content-type”:“multipart/form-data”的头文件。

所以下面的工作:

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

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

注意，对于axios，我必须使用content-type。

你可以将body设置为URLSearchParams的一个实例，并将查询字符串作为参数传递

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

document.forms[0]。Onsubmit = async(e) => { e.preventDefault (); const params = new URLSearchParams([…]新FormData (e。target) .entries ())); // fetch("/path/to/server"， {method:"POST"， body:params}) const response =等待新的响应(params).text(); console.log(响应); ｝ < >形式 <input name="email" value="test@example.com"> <input name="password" value="pw"> < input type = " submit " > > < /形式

客户端

不要设置内容类型标头。

// 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上的MDN(重点是我的):

FormData接口提供了一种方法，可以轻松地构造一组表示表单字段及其值的键/值对，然后可以使用XMLHttpRequest.send()方法轻松地发送这些字段。它使用与编码类型设置为“multipart/form-data”的表单相同的格式。

所以当你使用FormData时，你就把自己锁在了multipart/form-data中。没有办法将FormData对象作为主体发送，而不以multipart/form-data格式发送数据。

如果你想要以application/x-www-form-urlencoded的形式发送数据，你必须将主体指定为url编码的字符串，或者传递一个URLSearchParams对象。不幸的是，后者不能直接从表单元素初始化。如果你不想自己遍历你的表单元素(你可以使用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));

不过，在浏览器中仍然有一些实验性的支持，所以在使用它之前一定要进行适当的测试。