Penghantaran Borang dalam JavaScript

Anda sudah pandai bekerja dengan elemen borang dalam JavaScript, memprosesnya dalam pelayar. Walau bagaimanapun, borang juga boleh dihantar ke pelayan untuk diproses oleh bahagian pelayan laman web, yang ditulis dalam PHP atau NodeJS.

Ini diperlukan untuk menambah dan mengubah data laman web yang disimpan di pelayan.

Mari kita lihat bagaimana ia dilakukan. Katakan kita mempunyai beberapa input dan butang:

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

Mari bungkus elemen kita dalam tag form. Dalam kes ini, kita akan mendapat borang yang akan dihantar ke pelayan apabila butang ditekan:

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

Untuk membolehkan data borang diperoleh di pelayan, setiap input perlu diberikan namanya sendiri:

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

Dalam kes ini, data borang akan sampai ke pelayan dalam bentuk pasangan kunci-nilai, di mana kunci akan menjadi nama elemen borang, dan nilainya adalah data yang dimasukkan.

Untuk menghantar borang, tidak perlu mempunyai pelayan. Anda boleh menyalin kod borang yang diberikan ke mana-mana fail, buka dalam pelayar dan tekan butang hantar - borang akan dihantar dan halaman pelayar akan dimuat semula.

Walau bagaimanapun, tanpa pelayan, data borang tidak akan pergi ke mana-mana. Jadi, mari kita menguji kerja borang bersama-sama dengan pelayan. Buat masa ini, anda tidak tahu sebarang bahasa pelayan, jadi mari berlatih menghantar borang menggunakan pelayan HTTP pendidikan kami.

Mari letakkan borang kami dalam beberapa fail supaya ia boleh diakses pada alamat http://localhost:3001/form.html:

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

Mari tambahkan atribut action kepada borang kami, yang menunjukkan alamat penghantaran borang kami:

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

Sekarang dalam fail server.js, mari tulis pengendali untuk alamat penghantaran borang:

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

Data borang yang dihantar akan masuk ke dalam parameter pengendali kami:

export default {
	'/handler/': function(data) {
		console.log(data); // akan dipaparkan dalam konsol pelayan
		return 'form data received';
	}
}

Buat borang dan fail untuk memprosesnya. Hantar borang dan pastikan data memang sampai ke pelayan.