Slanje formulara u JavaScript-u

Već znate kako da radite sa elementima formulara u JavaScript-u, obrađujući ih u pretraživaču. Formulari se, međutim, mogu takođe slati na server, kako bi ih obradio serverski deo sajta, napisan u PHP-u ili NodeJS-u.

Ovo je potrebno kako bismo dodavali i menjali podatke sajta, koji se čuvaju na serveru.

Hajde da pogledamo kako se to radi. Neka imamo nekoliko input polja i dugme:

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

Zamotajmo naše elemente u tag form. U tom slučaju ćemo dobiti formular koji će se na klik dugmeta slati na server:

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

Da bismo mogli da dobijemo podatke formulara na serveru, neophodno je svakom input polju dati svoje ime:

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

U tom slučaju će podaci formulara na server stići u obliku parova ključ-vrednost, gde će ključevi biti imena elemenata formulara, a vrednosti - uneti podaci.

Za slanje formulara nije neophodan server. Možete da kopirate dati kod formulara u bilo koji fajl, pokrenete ga u pretraživaču i kliknete na dugme za slanje - formular će se poslati i stranica pretraživača će se ponovo učitati.

U odsustvu servera, međutim, podaci formulara neće nigde stići. Zato hajde da proveravamo rad formulara zajedno sa serverom. Trenutno ne znate nijedan serverski jezik, pa ćemo da vežbamo slanje formulara pomoću našeg učnog HTTP servera.

Hajde da smestimo naš formular u neki fajl tako da bude dostupan na adresi http://localhost:3001/form.html:

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

Dodajmo našem formularu atribut action, koji ukazuje na adresu za slanje našeg formulara:

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

Sada u fajlu server.js napišimo handler za adresu slanja formulara:

export default {
	'/handler/': function() {
		return 'podaci formulara primljeni';
	}
}

U parametar našeg handler-a će stići poslati podaci formulara:

export default {
	'/handler/': function(data) {
		console.log(data); // ispisaće se u konzoli servera
		return 'podaci formulara primljeni';
	}
}

Napravite formular i fajl za njegovu obradu. Pošaljite formular i proverite da li su podaci zaista stigli na server.