Làm cách nào để đăng dữ liệu biểu mẫu với api tìm nạp?

Mã của tôi:

fetch("api/xxx", {
    body: new FormData(document.getElementById("form")),
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        // "Content-Type": "multipart/form-data",
    },
    method: "post",
}

Tôi đã cố gắng đăng biểu mẫu của mình bằng cách sử dụng api tìm nạp và nội dung mà nó gửi đi như sau:

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

test@example.com
-----------------------------114782935826962
Content-Disposition: form-data; name="password"

pw
-----------------------------114782935826962--

(Tôi không biết tại sao số trong ranh giới bị thay đổi mỗi khi nó gửi ...)

Tôi muốn nó gửi dữ liệu có "Content-Type": "application / x-www-form-urlencoded", tôi phải làm gì? Hoặc nếu tôi phải xử lý nó, làm cách nào để giải mã dữ liệu trong bộ điều khiển của tôi?

Trả lời câu hỏi của tôi cho ai, tôi biết tôi có thể làm điều đó với:

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

Những gì tôi muốn là một cái gì đó như $ ("# form"). Serialize () trong jQuery (w / o sử dụng jQuery) hoặc cách giải mã mulitpart / form-data trong controller. Cảm ơn câu trả lời của bạn mặc dù.

Để trích dẫn MDN trênFormData (nhấn mạnh của tôi):

Các FormDatagiao diện cung cấp một cách dễ dàng xây dựng một tập hợp các cặp khóa / giá trị đại diện cho các lĩnh vực hình thức và giá trị của họ, có thể sau đó được dễ dàng gửi bằng cách sử dụng XMLHttpRequest.send()phương pháp. Nó sử dụng cùng một định dạng mà một biểu mẫu sẽ sử dụng nếu loại mã hóa được đặt thành"multipart/form-data" .

Vì vậy, khi sử dụng FormData bạn đang tự nhốt mình vào multipart/form-data. Không có cách nào để gửi một FormDatađối tượng dưới dạng phần thân và không gửi dữ liệu ở multipart/form-datađịnh dạng.

Nếu bạn muốn gửi dữ liệu vì application/x-www-form-urlencodedbạn sẽ phải chỉ định phần nội dung là một chuỗi mã hóa URL hoặc chuyển một URLSearchParamsđối tượng. Rất tiếc, cái sau không thể được khởi tạo trực tiếp từ một formphần tử. Nếu bạn không muốn tự mình lặp lại các thành phần biểu mẫu của mình (bạn có thể làm điều này bằng cách sử dụng HTMLFormElement.elements), bạn cũng có thể tạo một URLSearchParamsđối tượng từ một FormDatađối tượng:

const data = new URLSearchParams();
for (const pair of new FormData(formElement)) {
    data.append(pair[0], pair[1]);
}

fetch(url, {
    method: 'post',
    body: data,
})
.then(…);

Lưu ý rằng bạn không cần phải tự chỉ định Content-Typetiêu đề.

Theo ghi nhận của tu sĩ thời gian trong các nhận xét, bạn cũng có thể tạo URLSearchParamsvà chuyển FormDatađối tượng trực tiếp, thay vì nối các giá trị trong một vòng lặp:

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

Tuy nhiên, điều này vẫn có một số hỗ trợ thử nghiệm trong các trình duyệt, vì vậy hãy đảm bảo kiểm tra điều này đúng cách trước khi bạn sử dụng.

Khách hàng

Không đặt tiêu đề loại nội dung.

// Build formData object.
let formData = new FormData();
formData.append('name', 'John');
formData.append('password', 'John123');

fetch("api/SampleData",
    {
        body: formData,
        method: "post"
    });

Người phục vụ

Sử dụng FromFormthuộc tính để chỉ định rằng nguồn liên kết là dữ liệu biểu mẫu.

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

Bạn có thể đặt bodythành một phiên bản của URLSearchParamsvới chuỗi truy vấn được truyền dưới dạng đối số

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([...new FormData(e.target).entries()]);
  // fetch("/path/to/server", {method:"POST", body:params})
  const response = await new Response(params).text();
  console.log(response);
}

<form>
  <input name="email" value="test@example.com">
  <input name="password" value="pw">
  <input type="submit">
</form>

Sử dụng FormDatavà fetchđể lấy và gửi dữ liệu

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

  console.log('We send post asynchronously (AJAX)');
  e.preventDefault();
}

<form method="POST" action="myapi/send" onsubmit="send(event,this)">
    <input hidden name="crsfToken" value="a1e24s1">
    <input name="email" value="a@b.com">
    <input name="phone" value="123-456-789">
    <input type="submit">    
</form>

Look on chrome console>network before/after 'submit'

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