Trimiterea formularelor în JavaScript

Deja știți să lucrați cu elementele de formular în JavaScript, procesându-le în browser. Formularele, totuși, pot fi de asemenea trimise către server, pentru a fi procesate de partea de server a site-ului, scrisă în PHP sau NodeJS.

Acest lucru este necesar pentru a adăuga și modifica datele site-ului, stocate pe server.

Să vedem cum se face acest lucru. Să presupunem că avem câțiva input-uri și un buton:

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

Să împachetăm elementele noastre în tag-ul form. În acest caz, vom obține un formular care la apăsarea butonului va fi trimis către server:

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

Pentru a putea obține datele formularului pe server, este necesar să dăm fiecărui input un nume:

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

În acest caz, datele formularului vor ajunge pe server sub formă de perechi cheie-valoare, unde cheile vor fi numele elementelor formularului, iar valorile - datele introduse.

Pentru a trimite formularul, nu este nevoie de un server. Puteți copia codul formularului într-un fișier, să îl deschideți în browser și să apăsați pe butonul de trimitere - formularul va fi trimis și pagina browserului se va reîmprospăta.

În absența serverului, totuși, datele formularului nu vor ajunge nicăieri. De aceea, să verificăm funcționarea formularului împreună cu un server. Momentan nu cunoașteți limbaje de server, așa că să exersăm trimiterea formularului cu ajutorul serverului nostru HTTP de învățare.

Să plasăm formularul nostru într-un fișier astfel încât să fie accesibil la adresa http://localhost:3001/form.html:

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

Să adăugăm formularului nostru atributul action, care indică adresa de trimitere a formularului nostru:

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

Acum în fișierul server.js să scriem un handler pentru adresa de trimitere a formularului:

export default {
	'/handler/': function() {
		return 'datele formularului au fost primite';
	}
}

În parametrul handler-ului nostru vor intra datele trimise ale formularului:

export default {
	'/handler/': function(data) {
		console.log(data); // se va afișa în consola serverului
		return 'datele formularului au fost primite';
	}
}

Creați un formular și un fișier pentru procesarea lui. Trimiteți formularul și verificați că datele într-adevăr au ajuns pe server.