Formu nosūtīšana JavaScript

Jūs jau esat iemācījušies strādāt ar formu elementiem JavaScript, apstrādājot tos pārlūkprogrammā. Tomēr formas var arī nosūtīt uz serveri, lai tās apstrādātu vietnes servera puse, kas uzrakstīta PHP vai NodeJS.

Tas ir nepieciešams, lai pievienotu un mainītu vietnes datus, kas glabājas serverī.

Paskatīsimies, kā tas tiek darīts. Pieņemsim, ka mums ir daži ievades lauki un poga:

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

Ietīsim mūsu elementus tagā form. Tādā gadījumā mēs iegūsim formu, kura nospiežot pogu tiks nosūtīta uz serveri:

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

Lai serverī varētu iegūt formas datus, katram ievades laukam jānodod savs vārds:

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

Tādā gadījumā uz serveri formas dati nonāks atslēgas-vērtību pāru veidā, kur atslēgas būs formu elementu vārdi, bet vērtības - ievadītie dati.

Lai nosūtītu formu, nav nepieciešams servers. Jūs varat nokopēt doto formas kodu jebkurā failā, palaist to pārlūkprogrammā un nospiest uz sūtīšanas pogas - forma tiks nosūtīta un pārlūkprogrammas lapa pārlādēsies.

Bez servera, tomēr, formas dati neienāks nekur. Tāpēc pārbaudīsim formas darbību kopā ar serveri. Pagaidām jūs nezināt nevienu servera valodu, tāpēc praktizēsimies sūtīt formu ar mūsu mācību HTTP servera palīdzību.

Ievietosim mūsu formu kādā failā tā, lai tā būtu pieejama ar adresi http://localhost:3001/form.html:

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

Pievienosim mūsu formai atribūtu action, kas norāda mūsu formas sūtīšanas adresi:

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

Tagad failā server.js uzrakstīsim formas sūtīšanas adreses apstrādātāju:

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

Mūsu apstrādātāja parametrā nonāks nosūtītie formas dati:

export default {
	'/handler/': function(data) {
		console.log(data); // izvadīsies servera konsolē
		return 'form data received';
	}
}

Izveidojiet formu un failu tās apstrādei. Nosūtiet formu un pārbaudiet, vai dati patiešām ieradās serverī.