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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

server.jsexport default {
  '/handler/': function() {
    return 'form data received';
  }
}

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

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