Odesílání formulářů v JavaScriptu

Už umíte pracovat s prvky formulářů v JavaScriptu a zpracovávat je v prohlížeči. Formuláře je však také možné odesílat na server, aby je zpracovala serverová část webu, napsaná v PHP nebo NodeJS.

To je potřeba pro přidávání a změnu dat webu, které jsou uloženy na serveru.

Podívejme se, jak se to dělá. Předpokládejme, že máme několik vstupních polí a tlačítko:

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

Zabalme naše prvky do tagu form. V takovém případě získáme formulář, který po kliknutí na tlačítko bude odeslán na server:

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

Aby server mohl získat data formuláře, je nutné každému vstupnímu poli dát své jméno:

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

V takovém případě přijdou data formuláře na server ve formě párů klíč-hodnota, kde klíče budou jmena prvků formuláře a hodnoty - zadaná data.

Pro odeslání formuláře není nutný server. Můžete zkopírovat uvedený kód formuláře do libovolného souboru, spustit jej v prohlížeči a kliknout na tlačítko odeslání - formulář se odešle a stránka prohlížeče se znovu načte.

Při absenci serveru se však data formuláře nikam nedostanou. Proto si práci s formulářem pojďme vyzkoušet spolu se serverem. Zatím neznáte žádné serverové jazyky, proto si procvičíme odesílání formuláře pomocí našeho výukového HTTP serveru.

Umístěme náš formulář do určitého souboru tak, aby byl přístupný na adrese http://localhost:3001/form.html:

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

Přidejme našemu formuláři atribut action, určující adresu odeslání našeho formuláře:

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

Nyní v souboru server.js napíšeme obsluhu adresy pro odeslání formuláře:

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

Do parametru naší obsluhy přijdou odeslaná data formuláře:

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

Vytvořte formulář a soubor pro jeho zpracování. Odešlete formulář a ověřte, že data skutečně přišla na server.