Pošiljanje obrazcev v JavaScript

Že znate delati z elementi obrazcev v JavaScript in jih obdelovati v brskalniku. Obrazce pa lahko pošljete tudi na strežnik, da jih obdela strežniški del spletnega mesta, napisan v PHP-ju ali NodeJS.

To je potrebno za dodajanje in spreminjanje podatkov spletnega mesta, ki so shranjeni na strežniku.

Poglejmo, kako se to naredi. Naj imamo več vnosnih polj in gumb:

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

Ovijmo naše elemente v oznako form. V tem primeru bomo dobili obrazec, ki se bo ob kliku na gumb poslal na strežnik:

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

Da lahko na strežniku pridobimo podatke obrazca, je potrebno vsakemu vnosnemu polju dati svoje ime:

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

V tem primeru bodo podatki obrazca prispeli na strežnik v obliki parov ključ-vrednost, kjer bodo ključi imena elementov obrazca, vrednosti pa vneseni podatki.

Za pošiljanje obrazca ni potreben strežnik. Lahko kopirate prikazano kodo obrazca v katero koli datoteko, zaženete jo v brskalniku in kliknete na gumb za pošiljanje - obrazec se bo poslal in stran brskalnika se bo osvežila.

Če strežnika ni, podatki obrazca ne bodo prišli nikamor. Zato bomo preverjali delovanje obrazca skupaj s strežnikom. Ker še ne poznate nobenega strežniškega jezika, bomo vadili pošiljanje obrazca z pomočjo našega učnega HTTP strežnika.

Postavimo naš obrazec v neko datoteko tako, da bo dostopen na naslovu http://localhost:3001/form.html:

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

Dodajmo našemu obrazcu atribut action, ki določa naslov za pošiljanje našega obrazca:

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

Zdaj v datoteki server.js napišimo ročjalec naslova za pošiljanje obrazca:

server.jsexport default {
  '/handler/': function() {
    return 'podatki obrazca prejeti';
  }
}

V parameter našega ročjalca bodo prišli poslani podatki obrazca:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data); // izpiše se v konzolo strežnika
    return 'podatki obrazca prejeti';
  }
}