Dërgimi i Formave në JavaScript

Tashmë dini si të punoni me elementët e formave në JavaScript, duke i përpunuar në shfletues. Megjithatë, format mund të dërgohen gjithashtu në server, në mënyrë që ato të përpunohen nga pjesa e serverit të faqes, e shkruar në PHP ose NodeJS.

Kjo nevojitet për të shtuar dhe ndryshuar të dhënat e faqes që ruhen në server.

Le të shohim se si bëhet kjo. Le të them se kemi disa inpute dhe një buton:

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

Le t'i mbështjellim elementët tanë në tagun form. Në këtë rast, do të kemi një formë, e cila kur shtypet butoni do të dërgohet në server:

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

Që në server të mund të merren të dhënat e formës, është e nevojshme që çdo input të ketë emrin e vet:

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

Në këtë rast, në server të dhënat e formës do të vijnë në formën e çifteve çelës-vlerë, ku çelësat do të jenë emrat e elementeve të formës, dhe vlerat - të dhënat e futura.

Për të dërguar formën, nuk ka nevojë për një server. Ju mund ta kopjoni kodin e dhënë të formës në çdo skedar, ta hapni në shfletues dhe të klikoni në butonin e dërgimit - forma do të dërgohet dhe faqja e shfletuesit do të ringarkohet.

Megjithatë, në mungesë të një serveri, të dhënat e formës nuk do të shkojnë askund. Prandaj, le të kontrollojmë funksionimin e formës së bashku me një server. Për momentin ju nuk dini asnjë gjuhë serveri, prandaj le të praktikohemi duke dërguar formën me ndihmën e serverit tonë tutorial HTTP.

Le të vendosim formën tonë në një skedar në mënyrë që të jetë e disponueshme në adresën http://localhost:3001/form.html:

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

Le t'i shtojmë formës sonë atributin action, që tregon adresën e dërgimit të formës sonë:

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

Tani në skedarin server.js le të shkruajmë një përpunues për adresën e dërgimit të formës:

export default {
	'/handler/': function() {
		return 'të dhënat e formës u morën';
	}
}

Në parametrin e përpunuesit tonë do të hyjnë të dhënat e dërguara të formës:

export default {
	'/handler/': function(data) {
		console.log(data); // do të shfaqet në konsolën e serverit
		return 'të dhënat e formës u morën';
	}
}

Krijoni një formë dhe një skedar për përpunimin e saj. Dërgoni formën dhe kontrolloni që të dhënat me të vërtetë kanë arritur në server.