Űrlapok elküldése JavaScriptben

Már tudod, hogyan kell űrlap elemekkel dolgozni JavaScriptben, a böngészőben való feldolgozásuk során. Az űrlapokat azonban a szerverre is elküldhetjük, hogy az oldal szerveroldali része dolgozza fel őket, ami PHP-ban vagy NodeJS-ben íródott.

Erre azért van szükség, hogy a szerveren tárolt weboldali adatokat adjunk hozzá vagy módosítsuk.

Nézzük meg, hogyan is történik ez. Tegyük fel, hogy van néhány beviteli mezőnk és egy gombunk:

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

Csomagoljuk be elemjeinket egy form tag-be. Ebben az esetben egy olyan űrlapot kapunk, amely a gomb megnyomásakor a szerverre lesz elküldve:

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

Ahhoz, hogy a szerveren megkapjuk az űrlap adatait, minden egyes beviteli mezőnek saját nevet kell adni:

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

Ebben az esetben az űrlap adatai kulcs-érték párok formájában érkeznek a szerverre, ahol a kulcsok az űrlap elemek nevei, az értékek pedig a bevitt adatok lesznek.

Az űrlap elküldéséhez nincs szükség szerverre. Bemásolhatod az adott űrlap kódját bármely fájlba, betöltheted a böngészőbe, és megnyomhatod a küldés gombot - az űrlap el lesz küldve és a böngésző oldala újratöltődik.

Szerver hiányában azonban az űrlap adatai sehova nem kerülnek. Ezért vizsgáljuk meg az űrlap működését egy szerverrel együtt. Mivel még nem ismersz semmilyen szerveroldali nyelvet, ezért gyakoroljunk az űrlap küldését a mi oktatási HTTP szerverünk segítségével.

Helyezzük el az űrlapunkat egy fájlban úgy, hogy az elérhető legyen a http://localhost:3001/form.html címen:

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

Adjunk hozzá az űrlapunknak egy action attribútumot, amely az űrlapunk küldési címét határozza meg:

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

Most a server.js fájlban írjunk egy kezelőt az űrlap küldési címéhez:

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

A kezelőnk paraméterébe megérkeznek az elküldött űrlap adatai:

export default {
	'/handler/': function(data) {
		console.log(data); // a szerver konzoljára íródik ki
		return 'form data received';
	}
}

Hozz létre egy űrlapot és egy fájlt a feldolgozásához. Küldd el az űrlapot és ellenőrizd, hogy az adatok valóban megérkeztek-e a szerverre.