Làm việc với FormData trong JavaScript

Giả sử chúng ta có một biểu mẫu:

<form action="/target/" method="POST">
	<input name="test1" value="123">
	<input name="test2" value="456">
	<input type="submit">
</form>

Giả sử chúng ta muốn lấy dữ liệu của biểu mẫu này dưới dạng các cặp key-value. Rõ ràng, để làm điều này, chúng ta sẽ phải chạy một vòng lặp và trong đó tạo ra kết quả mong muốn. Tuy nhiên, trong JavaScript, tồn tại một cách đơn giản hơn - có thể sử dụng đối tượng đặc biệt FormData, cho phép lấy dữ liệu biểu mẫu một cách có thứ tự.

Hãy cùng phân tích cách làm việc với đối tượng này. Đầu tiên, hãy lấy tham chiếu đến biểu mẫu của chúng ta:

let form = document.querySelector('form');

Bây giờ hãy tạo một đối tượng từ biểu mẫu của chúng ta:

let formData = new FormData(form);

Có thể in đối tượng của chúng ta ra console, tuy nhiên với cách in như vậy, chúng ta sẽ không thấy dữ liệu biểu mẫu:

console.log(formData);

Hãy chuyển đổi đối tượng của chúng ta thành mảng để thấy dữ liệu biểu mẫu:

console.log(Array.from(formData));

Cho một biểu mẫu có ba input. Đồng thời cho một nút bấm. Khi nhấn vào nút, hãy lấy dữ liệu biểu mẫu dưới dạng đối tượng FormData.