Invio di moduli in JavaScript

Sai già come lavorare con gli elementi dei moduli in JavaScript, elaborandoli nel browser. Tuttavia, i moduli possono anche essere inviati al server per essere elaborati dal backend del sito, scritto in PHP o NodeJS.

Questo è necessario per aggiungere e modificare i dati del sito memorizzati sul server.

Diamo un'occhiata a come si fa. Supponiamo di avere alcuni input e un pulsante:

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

Racchiudiamo i nostri elementi nel tag form. In questo caso otterremo un modulo che alla pressione del pulsante verrà inviato al server:

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

Affinché il server possa ricevere i dati del modulo, è necessario dare un nome a ogni input:

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

In questo caso i dati del modulo arriveranno al server sotto forma di coppie chiave-valore, dove le chiavi saranno i nomi degli elementi del modulo e i valori saranno i dati inseriti.

Per inviare il modulo, non è necessario avere un server. Puoi copiare il codice del modulo fornito in qualsiasi file, aprirlo nel browser e premere il pulsante di invio - il modulo verrà inviato e la pagina del browser si ricaricherà.

Tuttavia, senza un server, i dati del modulo non andranno da nessuna parte. Quindi proviamo a testare il funzionamento del modulo insieme a un server. Per ora non conosci linguaggi server-side, quindi esercitiamoci a inviare il modulo usando il nostro server HTTP didattico.

Posizioniamo il nostro modulo in un file in modo che sia accessibile all'indirizzo http://localhost:3001/form.html:

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

Aggiungiamo al nostro modulo l'attributo action, che specifica l'URL di destinazione del nostro modulo:

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

Ora nel file server.js scriviamo il gestore dell'URL di invio del modulo:

server.jsexport default {
  '/handler/': function() {
    return 'dati del modulo ricevuti';
  }
}

Nel parametro del nostro gestore arriveranno i dati inviati dal modulo:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data); // verrà visualizzato nella console del server
    return 'dati del modulo ricevuti';
  }
}