Vormide saatmine JavaScriptis

Sa juba oskad töötada vormielementidega JavaScriptis, töödeldes neid brauseris. Vorme saab aga ka serverisse saata, et neid töötleks saidi serveripoolne osa, kirjutatud PHP-s või NodeJS-is.

Seda on vaja selleks, et lisada ja muuta serveris hoitava saidi andmeid.

Vaatame, kuidas seda tehakse. Oletame, et meil on mitu sisendvälja ja nupp:

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

Mähime oma elemendid form silti. Sel juhul saame vormi, mis nupu vajutamisel saadetakse serverisse:

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

Et serveril oleks võimalik vormi andmeid saada, on vaja igale sisendväljale anda oma nimi:

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

Sel juhul saabuvad serverisse vormi andmed võtme-väärtuse paaridena, kus võtmeteks on vormielementide nimed ja väärtusteks - sisestatud andmed.

Vormi saatmiseks pole serverit vaja. Sa võid kopeerida toodud vormi koodi mis tahes faili, käivitada selle brauseris ja vajutada saatmisnuppu - vorm saadetakse ja brauseri leht laetakse uuesti.

Kui serverit pole, siis vormi andmed ei jõua kuhugi. Seetõttu kontrollime vormi tööd koos serveriga. Praegu sa ei tea ühtki serveripoolset keelt, seega harjutame vormi saatmist oma õppe HTTP serveri abil.

Paigaldame oma vormi mõnda faili nii, et see oleks kättesaadav aadressil http://localhost:3001/form.html:

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

Lisame oma vormile atribuudi action, mis määrab meie vormi saatmise aadressi:

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

Nüüd kirjutame faili server.js vormi saatmise aadressi töötleja:

export default {
	'/handler/': function() {
		return 'vormi andmed vastu võetud';
	}
}

Meie töötleja parameetrisse satuvad saadetud vormi andmed:

export default {
	'/handler/': function(data) {
		console.log(data); // kuvatakse serveri konsoolis
		return 'vormi andmed vastu võetud';
	}
}

Looge vorm ja fail selle töötlemiseks. Saatke vorm ja kontrollige, et andmed tõesti jõudsid serverisse.