Pengiriman Formulir dalam JavaScript

Anda sudah bisa bekerja dengan elemen formulir dalam JavaScript, menanganinya di browser. Namun, formulir juga dapat dikirim ke server agar dapat ditangani oleh bagian server situs, yang ditulis dalam PHP atau NodeJS.

Ini diperlukan untuk menambah dan mengubah data situs yang disimpan di server.

Mari kita lihat bagaimana hal ini dilakukan. Misalkan kita memiliki beberapa input dan tombol:

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

Mari bungkus elemen-elemen kita dalam tag form. Dalam hal ini, kita akan mendapatkan formulir yang akan dikirim ke server saat tombol ditekan:

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

Agar data formulir dapat diterima di server, setiap input harus diberikan namanya sendiri:

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

Dalam hal ini, data formulir akan sampai ke server dalam bentuk pasangan kunci-nilai, di mana kuncinya adalah nama elemen formulir, dan nilainya adalah data yang dimasukkan.

Untuk mengirim formulir, tidak perlu server. Anda dapat menyalin kode formulir yang diberikan ke file apa saja, jalankan di browser dan tekan tombol kirim - formulir akan terkirim dan halaman browser akan dimuat ulang.

Tanpa server, data formulir tidak akan sampai ke mana-mana. Jadi, mari kita periksa kerja formulir bersama dengan server. Untuk saat ini Anda belum mengetahui bahasa server apa pun, jadi mari berlatih mengirim formulir dengan bantuan HTTP server pembelajaran kami.

Mari tempatkan formulir kita di suatu file sehingga dapat diakses di alamat http://localhost:3001/form.html:

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

Mari tambahkan atribut action ke formulir kita, yang menunjukkan alamat pengiriman formulir kita:

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

Sekarang di file server.js, mari tulis handler untuk alamat pengiriman formulir:

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

Data formulir yang dikirim akan masuk ke parameter handler kita:

export default {
	'/handler/': function(data) {
		console.log(data); // akan tercetak di konsol server
		return 'form data received';
	}
}

Buatlah formulir dan file untuk menanganinya. Kirim formulir dan periksa bahwa data benar-benar sampai ke server.