Formų siuntimas JavaScript

Jūs jau mokate dirbti su formų elementais JavaScript, apdorodami juos naršyklėje. Tačiau formas taip pat galima siųsti į serverį, kad jas apdorotų svetainės serverinė dalis, parašyta PHP arba NodeJS.

To reikia norint pridėti ir pakeisti svetainės duomenis, saugomus serveryje.

Pažiūrėkime, kaip tai daroma. Tarkime, kad turime keletą įvesties laukų ir mygtuką:

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

Apgaubkime mūsų elementus form žyme. Tokiu atveju gausime formą, kuri paspaudus mygtuką bus siunčiama į serverį:

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

Kad serveris galėtų gauti formos duomenis, būtina kiekvienam įvesties laukui suteikti savo pavadinimą:

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

Tokiu atveju formos duomenys į serverį ateis porų raktas-reikšmė pavidalu, kur raktai bus formos elementų pavadinimai, o reikšmės - įvesti duomenys.

Formai siųsti nereikia serverio. Galite nukopijuoti pateiktą formos kodą į bet kurį failą, paleisti jį naršyklėje ir paspausti siuntimo mygtuką - forma bus išsiųsta ir naršyklės puslapis bus perkrautas.

Tačiau be serverio, formos duomenys niekur nepateks. Todėl formos veikimą tikrinkime kartu su serveriu. Kol dar nepažįstate jokių serverinių kalbų, treniruokimės siųsti formą naudodami mūsų mokomąjį HTTP serverį.

Patalpinkime mūsų formą kokiame nors faile taip, kad ji būtų prieinama adresu http://localhost:3001/form.html:

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

Suteikime mūsų formai action atributą, nurodantį mūsų formos siuntimo adresą:

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

Dabar server.js faile parašykime formos siuntimo adreso apdorotuvą:

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

Į mūsų apdorotūvo parametrą pateks išsiųsti formos duomenys:

export default {
	'/handler/': function(data) {
		console.log(data); // bus išvesta į serverio konsolę
		return 'form data received';
	}
}

Sukurkite formą ir failą jos apdorojimui. Išsiųskite formą ir patikrinkite, ar duomenys tikrai atejo į serverį.