JavaScript-ում ձևերի ուղարկում

Դուք արդեն գիտեք, թե ինչպես աշխատել ձևերի տարրերի հետ JavaScript-ում՝ դրանք մշակելով բրաուզերում: Սակայն ձևերը կարելի է նաև ուղարկել սերվեր, որպեսզի դրանք մշակի կայքի սերվերային մասը, որը գրված է PHP-ով կամ NodeJS-ով:

Սա անհրաժեշտ է կայքի տվյալները ավելացնելու և փոփոխելու համար, որոնք պահվում են սերվերում:

Եկեք տեսնենք, թե ինչպես է դա արվում: Թող մենք ունենանք մի քանի մուտքագրման դաշտ և կոճակ:

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

Մեր տարրերը փաթեթավորենք form պիտակի մեջ: Այս դեպքում մենք կստանանք մի ձև, որը սերվեր կուղարկվի կոճակի վրա կտտացնելով:

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

Որպեսզի սերվերում հնարավոր լինի ստանալ տվյալները ձևից, անհրաժեշտ է յուրաքանչյուր մուտքագրման դաշտին տալ իր անունը:

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

Այս դեպքում սերվեր ձևի տվյալները կգան բանալի-արժեք զույգերի տեսքով, որտեղ բանալիները կլինեն ձևի տարրերի անունները, իսկ արժեքները՝ մուտքագրված տվյալները:

Ձևը ուղարկելու համար կարիք չկա սերվերի: Դուք կարող եք պատճենել տրված ձևի կոդը ցանկացած ֆայլում, բացել այն բրաուզերում և կտտացնել ուղարկման կոճակի վրա - ձևը կուղարկվի և բրաուզերի էջը կվերաբեռնվի:

Սակայն սերվերի բացակայության դեպքում, ձևի տվյալները ոչ մի տեղ չեն հասնի: Ուստի եկեք ստուգենք ձևի աշխատանքը սերվերի հետ միասին: Քանի որ դուք դեռ չգիտեք սերվերային լեզուներ, եկեք պարապենք ձև ուղարկել օգտագործելով մեր ուսումնական HTTP սերվերը:

Եկեք տեղադրենք մեր ձևը ինչ-որ ֆայլում այնպես, որ այն հասանելի լինի այս հասցեով http://localhost:3001/form.html:

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

Մեր ձևին ավելացնենք action ատրիբուտը, որը ցույց է տալիս մեր ձևի ուղարկման հասցեն:

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

Այժմ server.js ֆայլում գրենք ձևի ուղարկման հասցեի մշակիչը:

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

Մեր մշակիչի պարամետրի մեջ կհայտնվեն ուղարկված ձևի տվյալները:

export default {
	'/handler/': function(data) {
		console.log(data); // կցուցադրվի սերվերի կոնսոլում
		return 'form data received';
	}
}

Ստեղծեք ձև և ֆայլ դրա մշակման համար: Ուղարկեք ձևը և ստուգեք, որ տվյալները իսկապես հասել են սերվեր: