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:

html<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:

html<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:

html<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:

public/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ë:

public/form.html<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:

server.jsexport 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:

server.jsexport 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';
  }
}