Odosielanie formulárov v JavaScripte

Už viete pracovať s prvkami formulárov v JavaScripte, spracovávať ich v prehliadači. Formuláre je však možné odoslať aj na server, aby ich spracovala serverová časť webu, napísaná v PHP alebo NodeJS.

To je potrebné na pridávanie a zmenu dát webu, ktoré sú uložené na serveri.

Pozrime sa, ako sa to robí. Nech máme niekoľko vstupov a tlačidlo:

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

Zabalíme naše prvky do značky form. V takom prípade dostaneme formulár, ktorý sa kliknutím na tlačidlo odošle na server:

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

Aby bolo možné získať údaje z formulára na serveri, je potrebné každému vstupu dať svoje meno:

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

V takom prípade prídu údaje formulára na server vo forme párov kľúč-hodnota, kde kľúčmi budú mená prvkov formulára a hodnotami - zadané údaje.

Na odoslanie formulára nie je potrebný server. Môžete skopírovať uvedený kód formulára do ľubovoľného súboru, spustiť ho v prehliadači a kliknúť na tlačidlo odoslania - formulár sa odošle a stránka prehliadača sa obnoví.

Bez serveru sa však údaje formulára dostanú nikde. Preto si overme fungovanie formulára spolu so serverom. Zatiaľ nepoznáte žiadne serverové jazyky, preto si precvičme odosielanie formulára s použitím nášho učebného HTTP servera.

Umiestnime náš formulár do nejakého súboru tak, aby bol dostupný na adrese http://localhost:3001/form.html:

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

Pridajme nášmu formuláru atribút action, ktorý určuje adresu odoslania nášho formulára:

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

Teraz v súbore server.js napíšme obslužnú rutinu adresy odoslania formulára:

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

Do parametra našej obslužnej rutiny prídu odoslané údaje formulára:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data); // vypíše sa do konzoly servera
    return 'form data received';
  }
}