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:

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

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

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

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

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

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

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

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

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

Crea un modulo e un file per la sua elaborazione. Invia il modulo e verifica che i dati siano effettivamente arrivati al server.