Phương thức gửi biểu mẫu trong JavaScript

Biểu mẫu có thể được gửi bằng hai cách: phương thức GET hoặc phương thức POST. Cách gửi biểu mẫu được điều chỉnh bởi thuộc tính method của biểu mẫu.

Ví dụ, hãy chỉ định phương thức gửi GET cho biểu mẫu:

<form action="/handler/" method="GET">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Và bây giờ là phương thức POST:

<form action="/handler/" method="POST">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Bây giờ hãy xem sự khác biệt giữa hai phương thức gửi là gì. Trong trường hợp phương thức GET, dữ liệu biểu mẫu sẽ hiển thị trong trình duyệt dưới dạng cái gọi là chuỗi tham số (query string), đại diện cho các cặp dạng khóa-giá trị, trong đó khóa sẽ là tên phần tử biểu mẫu và giá trị là dữ liệu đã nhập vào nó. Trong trường hợp này, các cặp giá trị sẽ được phân tách bằng dấu &.

Dữ liệu được gửi bằng phương thức GET sẽ đến server của chúng ta trong thuộc tính get của đối tượng dữ liệu:

export default {
	'/handler/': function(data) {
		console.log(data.get); // sẽ hiển thị trong console của server
		return 'form data received';
	}
}

Còn dữ liệu được gửi bằng phương thức POST sẽ đến server của chúng ta trong thuộc tính post của đối tượng dữ liệu:

export default {
	'/handler/': function(data) {
		console.log(data.post); // sẽ hiển thị trong console của server
		return 'form data received';
	}
}

Để ngắn gọn, bạn có thể thực hiện destructuring, để nhận dữ liệu của chúng ta vào một biến riêng biệt:

export default {
	'/handler/': function({get, post}) {
		console.log(get);
		console.log(post);
		return 'form data received';
	}
}