Odosielanie formulárov v JavaScripte

Už viete pracovať s prvkami formulárov v JavaScripte, spracovávať ich v prehliadači. Formuláre je však možné odoslať aj na server, aby ich spracovala serverová časť webu, napísaná v PHP alebo NodeJS.

To je potrebné na pridávanie a zmenu dát webu, ktoré sú uložené na serveri.

Pozrime sa, ako sa to robí. Nech máme niekoľko vstupov a tlačidlo:

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

Zabalíme naše prvky do značky form. V takom prípade dostaneme formulár, ktorý sa kliknutím na tlačidlo odošle na server:

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

Aby bolo možné získať údaje z formulára na serveri, je potrebné každému vstupu dať svoje meno:

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

V takom prípade prídu údaje formulára na server vo forme párov kľúč-hodnota, kde kľúčmi budú mená prvkov formulára a hodnotami - zadané údaje.

Na odoslanie formulára nie je potrebný server. Môžete skopírovať uvedený kód formulára do ľubovoľného súboru, spustiť ho v prehliadači a kliknúť na tlačidlo odoslania - formulár sa odošle a stránka prehliadača sa obnoví.

Bez serveru sa však údaje formulára dostanú nikde. Preto si overme fungovanie formulára spolu so serverom. Zatiaľ nepoznáte žiadne serverové jazyky, preto si precvičme odosielanie formulára s použitím nášho učebného HTTP servera.

Umiestnime náš formulár do nejakého súboru tak, aby bol dostupný na adrese http://localhost:3001/form.html:

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

Pridajme nášmu formuláru atribút action, ktorý určuje adresu odoslania nášho formulára:

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

Teraz v súbore server.js napíšme obslužnú rutinu adresy odoslania formulára:

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

Do parametra našej obslužnej rutiny prídu odoslané údaje formulára:

export default {
	'/handler/': function(data) {
		console.log(data); // vypíše sa do konzoly servera
		return 'form data received';
	}
}

Vytvorte formulár a súbor pre jeho spracovanie. Odošlite formulár a skontrolujte, či údaje naozaj prišli na server.