Gửi biểu mẫu trong JavaScript

Bạn đã biết cách làm việc với các phần tử biểu mẫu trong JavaScript, xử lý chúng trong trình duyệt. Tuy nhiên, biểu mẫu cũng có thể được gửi đến máy chủ để phần phía máy chủ của trang web, được viết bằng PHP hoặc NodeJS, xử lý chúng.

Điều này cần thiết để thêm và thay đổi dữ liệu của trang web được lưu trữ trên máy chủ.

Hãy xem cách thực hiện điều đó. Giả sử chúng ta có một vài ô nhập liệu và một nút:

<input>
<input>
<input type="submit">

Hãy bọc các phần tử của chúng ta trong thẻ form. Trong trường hợp này, chúng ta sẽ có một biểu mẫu, khi nhấn vào nút, biểu mẫu sẽ được gửi đến máy chủ:

<form>
	<input>
	<input>
	<input type="submit">
</form>

Để có thể nhận được dữ liệu biểu mẫu trên máy chủ, cần phải đặt cho mỗi ô nhập liệu một tên riêng:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Trong trường hợp này, dữ liệu biểu mẫu sẽ đến máy chủ dưới dạng các cặp key-value, trong đó key là tên của các phần tử biểu mẫu, còn value là dữ liệu đã nhập.

Để gửi biểu mẫu, không cần thiết phải có máy chủ. Bạn có thể sao chép mã biểu mẫu được cung cấp vào bất kỳ tệp nào, chạy nó trong trình duyệt và nhấn vào nút gửi - biểu mẫu sẽ được gửi đi và trang trình duyệt sẽ được tải lại.

Tuy nhiên, khi không có máy chủ, dữ liệu biểu mẫu sẽ không đi đến đâu cả. Vì vậy, chúng ta hãy kiểm tra hoạt động của biểu mẫu cùng với máy chủ. Hiện tại bạn chưa biết bất kỳ ngôn ngữ phía máy chủ nào, vì vậy hãy thực hành gửi biểu mẫu bằng cách sử dụng máy chủ HTTP học tập của chúng tôi.

Hãy đặt biểu mẫu của chúng ta vào một tệp nào đó sao cho nó có thể truy cập được tại địa chỉ http://localhost:3001/form.html:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Hãy thêm thuộc tính action cho biểu mẫu của chúng ta, chỉ định địa chỉ gửi biểu mẫu:

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

Bây giờ, trong tệp server.js, hãy viết trình xử lý cho địa chỉ gửi biểu mẫu:

export default {
	'/handler/': function() {
		return 'form data received';
	}
}

Dữ liệu biểu mẫu đã gửi sẽ được truyền vào tham số của trình xử lý của chúng ta:

export default {
	'/handler/': function(data) {
		console.log(data); // sẽ được in ra console của máy chủ
		return 'form data received';
	}
}

Tạo một biểu mẫu và một tệp để xử lý nó. Gửi biểu mẫu và kiểm tra xem dữ liệu có thực sự đến được máy chủ hay không.