Chuyển đổi đối tượng thành dạng dữ liệu javascript

Giả sử bạn có một biểu mẫu. Khi nó được gửi, bạn muốn nhận các giá trị của tất cả các trường và gửi chúng tới một API

	Title
	

	Body
	Learn magic, play Quidditch, and drink some butter beer.

	

	Submit

Làm cách nào để bạn dễ dàng nhận được các giá trị của tất cả các trường?

Hôm nay, chúng ta sẽ xem xét một cách dễ dàng, tự nhiên để làm điều đó.

var form = document.querySelector['form'];
var data = new FormData[form];

5

Hàm tạo

var form = document.querySelector['form'];
var data = new FormData[form];

5

Hàm tạo

var form = document.querySelector['form'];
var data = new FormData[form];

5 chấp nhận một đối số. biểu mẫu để lấy dữ liệu từ

var form = document.querySelector['form'];
var data = new FormData[form];

Đó là nó. Hàm tạo

var form = document.querySelector['form'];
var data = new FormData[form];

5 trả về một đối tượng FormData gồm các cặp khóa/giá trị từ các trường biểu mẫu của bạn

Các trường biểu mẫu phải có thuộc tính

var form = document.querySelector['form'];
var data = new FormData[form];

2, nếu không chúng sẽ bị bỏ qua. Chỉ một

var form = document.querySelector['form'];
var data = new FormData[form];

3 sẽ không hoạt động

Gửi dữ liệu biểu mẫu tới API bằng phương pháp

var form = document.querySelector['form'];
var data = new FormData[form];

5

Trước tiên, hãy thiết lập một trình lắng nghe sự kiện để phát hiện khi các biểu mẫu được gửi

document.addEventListener['submit', function [event] {

	// Prevent form from submitting to the server
	event.preventDefault[];

	// Do some stuff...

}];

Tiếp theo, chúng tôi sẽ gửi dữ liệu biểu mẫu tới API JSONPlaceholder bằng phương pháp

var form = document.querySelector['form'];
var data = new FormData[form];

5

Để làm điều này, chúng tôi sẽ chuyển

var form = document.querySelector['form'];
var data = new FormData[form];

6 của chúng tôi, biểu mẫu đã được gửi, thành một phương thức

var form = document.querySelector['form'];
var data = new FormData[form];

7 và sử dụng phương thức đó làm thuộc tính

var form = document.querySelector['form'];
var data = new FormData[form];

8

document.addEventListener['submit', function [event] {

	event.preventDefault[];

	fetch['//jsonplaceholder.typicode.com/posts', {
		method: 'POST',
		body: new FormData[event.target],
	}].then[function [response] {
		if [response.ok] {
			return response.json[];
		}
		return Promise.reject[response];
	}].then[function [data] {
		console.log[data];
	}].catch[function [error] {
		console.warn[error];
	}];
}];

Và đó là nó. Đây là một bản demo

Một số API không chấp nhận các đối tượng FormData

Nếu bạn xem dữ liệu được trả về cho bản trình diễn, bạn sẽ nhận thấy rằng dữ liệu biểu mẫu không hiển thị trong đối tượng dữ liệu được trả về

Trình giữ chỗ JSON không chấp nhận FormData. Nó muốn một đối tượng JSON

Bạn có thể chuyển đổi FormData thành một đối tượng bằng cách lặp qua FormData và đẩy từng mục vào một đối tượng

Để lặp qua FormData, chúng ta phải sử dụng phương thức

var form = document.querySelector['form'];
var data = new FormData[form];

9, phương thức này trả về một trình vòng lặp. Sau đó, chúng tôi có thể lặp qua từng mục bằng vòng lặp

document.addEventListener['submit', function [event] {

	// Prevent form from submitting to the server
	event.preventDefault[];

	// Do some stuff...

}];

0

Trên mỗi vòng lặp, chúng ta sẽ sử dụng phương thức

document.addEventListener['submit', function [event] {

	// Prevent form from submitting to the server
	event.preventDefault[];

	// Do some stuff...

}];

1 để lấy giá trị của

document.addEventListener['submit', function [event] {

	// Prevent form from submitting to the server
	event.preventDefault[];

	// Do some stuff...

}];

2 từ đối tượng

document.addEventListener['submit', function [event] {

	// Prevent form from submitting to the server
	event.preventDefault[];

	// Do some stuff...

}];

3 và đẩy nó vào đối tượng của chúng ta

var form = document.querySelector['form'];
var data = new FormData[form];

5

Bây giờ, chúng tôi có thể gửi API của mình như thế này

Chúng tôi sẽ chuyển

var form = document.querySelector['form'];
var data = new FormData[form];

6 vào phương thức

document.addEventListener['submit', function [event] {

	// Prevent form from submitting to the server
	event.preventDefault[];

	// Do some stuff...

}];

5 của chúng tôi, phương thức này nhận FormData và chuyển đổi nó thành một đối tượng cho chúng tôi. Sau đó, chúng tôi sẽ phân tích đối tượng được trả về thành một chuỗi với

document.addEventListener['submit', function [event] {

	// Prevent form from submitting to the server
	event.preventDefault[];

	// Do some stuff...

}];

6

var form = document.querySelector['form'];
var data = new FormData[form];

9

Trong bản demo được cập nhật này, bạn sẽ nhận thấy rằng toàn bộ dữ liệu được trả về

CẬP NHẬT. Một sự thay thế đơn giản hơn

Jim Winstead đã gợi ý cho tôi một giải pháp thay thế đơn giản hơn để lặp qua đối tượng bằng phương pháp

document.addEventListener['submit', function [event] {

	// Prevent form from submitting to the server
	event.preventDefault[];

	// Do some stuff...

}];

7

var form = document.querySelector['form'];
var data = new FormData[form];

1

Bạn sẽ sử dụng nó như thế này

var form = document.querySelector['form'];
var data = new FormData[form];

2

Đây là một bản demo với phương pháp này

Ở dạng video

Bạn tôi Steve Griffith có một video tuyệt vời về chủ đề này ở dạng video, nếu bạn muốn tìm hiểu thêm

Tính tương thích của trình duyệt web

Hàm tạo

var form = document.querySelector['form'];
var data = new FormData[form];

5 hoạt động trong tất cả các trình duyệt hiện đại và IE10 trở lên. Thật không may, các trình vòng lặp và phương thức

document.addEventListener['submit', function [event] {

	// Prevent form from submitting to the server
	event.preventDefault[];

	// Do some stuff...

}];

0 hoàn toàn không hoạt động trong IE và không thể được điền đầy

Tương tự, phương pháp

document.addEventListener['submit', function [event] {

	// Prevent form from submitting to the server
	event.preventDefault[];

	// Do some stuff...

}];

7 cũng không hoạt động trong IE

Tuần tới, chúng ta sẽ xem xét một số cách tương thích ngược hơn để tuần tự hóa dữ liệu biểu mẫu thành mảng, đối tượng và chuỗi tham số tìm kiếm

Bạn có thể thêm một đối tượng vào FormData không?

Tôi làm cách nào để lấy FormData bằng JavaScript?

Làm cách nào để chuyển đổi một đối tượng thành JSON trong JS?

JavaScript FormData là gì?