Crea moduli web: comprendere facilmente le richieste GET

In questo tutorial imparerai come ricevere e elaborare i dati del modulo con il metodo GET. Creerai un semplice modulo HTML e vedrai come questi dati vengono inviati al tuo server tramite l'URL. Discuteremo i concetti di base della richiesta GET e delineeremo i passaggi necessari in Express.js.

Punti chiave

• I dati del modulo possono essere inviati al server utilizzando il metodo GET.
• I dati trasmessi appaiono come parametri di query nell'URL.
• Puoi facilmente accedere ai parametri di query della richiesta e elaborarli ulteriormente.

Guida passo-passo

Per cominciare, iniziamo creando un modulo HTML. L'azione del tuo modulo è fondamentale poiché indica dove verranno inviati i dati del modulo.

Per creare un modulo semplice, aggiungi quanto segue:

Il percorso nell'azione del modulo indica dove i dati devono essere inviati, nel nostro caso /submitform. Qui sarà definito successivamente il gestore GET nel nostro server Express. Per l'input useremo un semplice campo di testo:

Dopo aver configurato il modulo, assicurati che il server sia pronto a ricevere i dati. Devi garantire di aver configurato il metodo GET nel tuo server Express per gestire le richieste.

Successivamente, ricarica la pagina per verificare che tutto funzioni correttamente. Se inserisci qualcosa nel campo di testo, puoi inviare il modulo premendo il tasto Invio, anche se non è presente alcun pulsante di invio.

Dopo aver inviato il modulo, dovresti ricevere una risposta dal server che conferma l'avvenuto invio dei dati.

Qui puoi vedere il payload inviato al server. Nel nostro caso, il parametro Nome è stato aggiunto all'URL.

Nel codice del server, esamineremo ora il relativo gestore GET di cui abbiamo bisogno per elaborare la richiesta. Il codice sarà presente nel file index.js. Definisci il gestore nel seguente modo:

Ora puoi recuperare i parametri di query nel codice del server accedendo a request.query. Puoi anche implementarlo nel tuo gestore GET.

Se invii nuovamente il modulo, vedrai che il parametro viene restituito correttamente. Assicurati di riavviare il server ogni volta che apporti modifiche al server.

Per accedere al Nome, usa il formato request.query.Nome. Se modifichi il Nome nel modulo, assicurati di aggiornare il parametro anche nel codice del server.

Se cambi il Nome nel modulo in first_name, il parametro richiesto apparirà come segue:

Puoi vedere che il server riceve e restituisce correttamente i dati:

Con queste conoscenze di base, ora puoi elaborare i dati ricevuti, ad esempio salvarli in un database, utilizzarli altrove o restituirli semplicemente.

Se lo desideri, puoi persino inviare i dati ricevuti nuovamente al client e agire come un server di eco.

La visualizzazione potrebbe apparire come segue:

Se inserisci caratteri speciali nel campo di testo, il server li processerà e decodificherà di conseguenza. Noterai che l'output sarà corretto, indipendentemente dai caratteri inseriti dall'utente.

È importante notare che i diversi framework server gestiscono gli encoding in modi diversi. Quando si utilizza Express, la decodifica dei query parameters di solito è già inclusa, quindi non è necessario preoccuparsene.

Adesso hai imparato le basi per gestire le richieste GET, e abbiamo discusso l'uso dei parametri di query nel framework Express. Successivamente ci occuperemo del metodo POST, che richiede un'implementazione diversa.

Riepilogo

In questo tutorial hai imparato come creare un'applicazione di modulo web semplice utilizzando il metodo GET. Il processo coinvolge la configurazione di un modulo HTML, l'invio dei dati del modulo a un server Express e il recupero dei parametri di query per ulteriore elaborazione. Hai anche visto come configurare correttamente il server per ricevere i dati del modulo e rispondere ad essi.