Pošiljanje obrazcev v JavaScript

Že znate delati z elementi obrazcev v JavaScript in jih obdelovati v brskalniku. Obrazce pa lahko pošljete tudi na strežnik, da jih obdela strežniški del spletnega mesta, napisan v PHP-ju ali NodeJS.

To je potrebno za dodajanje in spreminjanje podatkov spletnega mesta, ki so shranjeni na strežniku.

Poglejmo, kako se to naredi. Naj imamo več vnosnih polj in gumb:

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

Ovijmo naše elemente v oznako form. V tem primeru bomo dobili obrazec, ki se bo ob kliku na gumb poslal na strežnik:

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

Da lahko na strežniku pridobimo podatke obrazca, je potrebno vsakemu vnosnemu polju dati svoje ime:

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

V tem primeru bodo podatki obrazca prispeli na strežnik v obliki parov ključ-vrednost, kjer bodo ključi imena elementov obrazca, vrednosti pa vneseni podatki.

Za pošiljanje obrazca ni potreben strežnik. Lahko kopirate prikazano kodo obrazca v katero koli datoteko, zaženete jo v brskalniku in kliknete na gumb za pošiljanje - obrazec se bo poslal in stran brskalnika se bo osvežila.

Če strežnika ni, podatki obrazca ne bodo prišli nikamor. Zato bomo preverjali delovanje obrazca skupaj s strežnikom. Ker še ne poznate nobenega strežniškega jezika, bomo vadili pošiljanje obrazca z pomočjo našega učnega HTTP strežnika.

Postavimo naš obrazec v neko datoteko tako, da bo dostopen na naslovu http://localhost:3001/form.html:

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

Dodajmo našemu obrazcu atribut action, ki določa naslov za pošiljanje našega obrazca:

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

Zdaj v datoteki server.js napišimo ročjalec naslova za pošiljanje obrazca:

export default {
	'/handler/': function() {
		return 'podatki obrazca prejeti';
	}
}

V parameter našega ročjalca bodo prišli poslani podatki obrazca:

export default {
	'/handler/': function(data) {
		console.log(data); // izpiše se v konzolo strežnika
		return 'podatki obrazca prejeti';
	}
}

Ustvarite obrazec in datoteko za njegovo obdelavo. Pošljite obrazec in preverite, ali so podatki res prispeli na strežnik.