Requêtes GET/POST avec Node.js

Dans de nombreux scénarios, notre serveur doit interagir avec le navigateur de l'utilisateur, par exemple lors de la soumission d'un formulaire.

Les soumissions de formulaires au serveur utilisent généralement des requêtes GET/POST.

Dans ce chapitre, nous allons présenter les requêtes GET/POST de Node.js.

Obtenir le contenu d'une requête GET

Comme les requêtes GET sont directement intégrées dans le chemin, l'URL est le chemin complet de la requête, y compris la?partie après `?`, vous pouvez donc analyser manuellement le contenu après celle-ci comme paramètres de requête GET.

Dans node.js, vous pouvez utiliser le constructeur URL pour analyser l'URL de la requête.

L'objet URL est un outil standard dans Node.js pour analyser et manipuler les URL. Il fournit une interface pratique pour accéder aux différents composants d'une URL et les modifier, tels que le protocole, le nom d'hôte, le chemin, les paramètres de requête, etc.

Exemple

const http = require('http'); const util = require('util'); http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' }); //Utilisez le constructeur URL pour analyser l’URL de la requête const myUrl = new URL(req.url, `http://${req.headers.host}`); //Affichez les différentes parties de l’URL res.end(util.inspect({ href: myUrl.href, origin: myUrl.origin, protocol: myUrl.protocol, host: myUrl.host, hostname: myUrl.hostname, port: myUrl.port, pathname: myUrl.pathname, search: myUrl.search, searchParams: Object.fromEntries(myUrl.searchParams) //Convertissez searchParams en un objet simple })); }).listen(3000); console.log("Le serveur est en cours d'exécution à l'adresse http://localhost:3000");

Visitez dans le navigateurhttp://localhost:3000/user?name=Example&url=www.example.comPuis affichez le résultat renvoyé :

Obtention des paramètres d'URL

Nous pouvons utiliser la méthode url.parse pour analyser les paramètres dans l'URL. Le code est le suivant :

Exemple

const http = require('http'); http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' }); //Utilisez le constructeur URL pour analyser l’URL de la requête const myUrl = new URL(req.url, `http://${req.headers.host}`); //Obtenir les paramètres de requête const name = myUrl.searchParams.get("name"); const siteUrl = myUrl.searchParams.get("url"); res.write("Nom du site web :" + (name || "Non fourni")); res.write("\n"); res.write("URL du site web :" + (siteUrl || "Non fourni")); res.end(); }).listen(3000); console.log("Le serveur est en cours d'exécution à l'adresse http://localhost:3000");

Visitez dans le navigateurhttp://localhost:3000/user?name=Example&url=www.example.comPuis affichez le résultat renvoyé :

Objet URL

Voici les propriétés et méthodes de l'objet URL :

Propriété/MéthodeDescriptionExemple de sortie
hrefLa chaîne URL complète"http://example.com:8080/path?foo=bar#section"
originL'origine de l'URL, incluant le protocole, le nom d'hôte et le numéro de port (le cas échéant)"http://example.com:8080"
protocolLa partie protocole de l'URL, suivie de:"http:"
hostnom d'hôte et numéro de port"example.com:8080"
hostnameNom d'hôte, à l'exclusion du numéro de port"example.com"
portNuméro de port (si spécifié)"8080"
pathnameLa partie pathname"/path"
searchLa partie chaîne de requête, y compris le?"?foo=bar&hello=world"
searchParamsURLSearchParamsUn objet pour manipuler les paramètres de requête{ foo: 'bar', hello: 'world' }
hashLa partie ancre, y compris le#"#section"
MéthodeDescriptionExemple de codeExemple de sortie
get(name)Obtenir la valeur du paramètre de requête avec le nom spécifiémyUrl.searchParams.get("foo")"bar"
append(name, value)Ajouter un nouveau paramètre à la chaîne de requêtemyUrl.searchParams.append("newKey", "newValue")?foo=bar&newKey=newValue
set(name, value)Définir le paramètre avec le nom spécifié dans la chaîne de requête (mettre à jour s'il existe déjà)myUrl.searchParams.set("foo", "newBar")?foo=newBar
delete(name)Supprimer le paramètre de requête avec le nom spécifiémyUrl.searchParams.delete("foo")?hello=world
has(name)Déterminer si un paramètre portant le nom spécifié existe dans la chaîne de requêtemyUrl.searchParams.has("foo")trueoufalse
forEach(callback)Parcourir les paires clé-valeur des paramètres de requête et exécuter une fonction de rappelmyUrl.searchParams.forEach((v, k) => console.log(k, v))Sortie de paire clé-valeur
toString()Convertir les paramètres de requête en une forme de chaîne, adaptée pour reconstruire une URLmyUrl.searchParams.toString()"foo=bar&hello=world"

Exemple

const myUrl = new URL("http://example.com/path?foo=bar&hello=world");

console.log(myUrl.pathname);            // Sortie : /path
console.log(myUrl.searchParams.get("foo")); // Sortie : bar

myUrl.searchParams.append("newKey", "newValue");
console.log(myUrl.href);               // Sortie : http://example.com/path?foo=bar&hello=world&newKey=newValue

Obtention du contenu de la requête POST

En Node.js, la gestion des requêtes POST nécessite généralement de recevoir les données du corps de la requête via le module http. Contrairement aux requêtes GET, les données des requêtes POST ne sont pas incluses dans l'URL mais sont envoyées dans le corps de la requête. Par conséquent, lors de la réception de données POST dans Node.js, vous devez écouter et gérer larequêtede l'objet requêtedataetendévénement.

  • Écoutez l'dataévénement: Lorsqu'un morceau de données arrive au serveur,dataL'événement est déclenché, et le morceau de données est passé en paramètre au callback.
  • Écoutez l'endévénement: Lorsque l'intégralité du corps de la requête a été reçue,endL'événement est déclenché, et à ce stade, vous pouvez traiter les données POST complètes.
Le code suivant montre comment utiliser le module http dans Node.js pour gérer les requêtes POST :

Exemple

const http = require('http');

// Créer un serveur HTTP
http.createServer((req, res) => {
    // Vérifier si la méthode de la requête est POST
    if (req.method === 'POST') {
        let body = '';

        // Écouter l'événement data, recevoir les données par morceaux
        req.on('data', (chunk) => {
            body += chunk; // Accumuler les morceaux de données reçus
        });

        // Écouter l'événement end, la réception des données est terminée
        req.on('end', () => {
            // Afficher les données POST reçues
            console.log('Données POST reçues :', body);

            // Définir les en-têtes et le contenu de la réponse
            res.writeHead(200, { 'Content-Type': 'text/plain' });
            res.end('Données POST reçues avec succès !');
        });

    } else {
        // Gestion des requêtes non-POST
        res.writeHead(405, { 'Content-Type': 'text/plain' });
        res.end('Seules les requêtes POST sont prises en charge.');
    }

}).listen(3000, () => {
    console.log('Le serveur est en cours d'exécution à http://localhost:3000');
});

Explication du code :

  1. Détecter la méthode de requête: Utilisezreq.method === 'POST'pour déterminer si le type de requête est POST.
  2. Recevoir les données: Dansreq.on('data')l'événement, accumulez les morceaux de données pour former le corps complet des données.
  3. Terminer la réception: Dansreq.on('end')l'événement, traitez les données POST complètes.
  4. Répondre au client: Après avoir terminé la réception et le traitement des données, envoyez une réponse au client.

Vous pouvez utiliser la commande curl pour tester les requêtes POST :

curl -X POST -d "name=example&age=25" http://localhost:3000

Traitement des données JSON

Si la requête POST envoie des données JSON, vous pouvezreq.on('end')analyser les données reçues dans un objet :

req.on('end', () => {
    const parsedData = JSON.parse(body); // 将 JSON 字符串解析为对象
    console.log('Received JSON data:', parsedData);
    res.end('JSON data received successfully!');
});

Module querystring

Le module querystring est utilisé pour gérer les chaînes de requête URL et les données de requête POST.

Pour les données de requête POST encodées en application/x-www-form-urlencoded, le module querystring peut aider à analyser le corps de la requête et à le convertir en un objet JavaScript pour un accès et une manipulation faciles.

Supposons que les données de requête POST envoyées par le client soient au formatapplication/x-www-form-urlencoded(par exemple, soumission de formulaire), et que les données soient similaires àname=example&age=25Après avoir reçu les données, vous pouvez utiliserquerystring.parsela méthode pour analyser les données en un objet.

Explication de la structure syntaxique de base

var http = require('http'); var querystring = require('querystring'); var util = require('util'); http.createServer(function(req, res){ //Définissez une variable post pour stocker temporairement le corps de la requête. var post = ''; //Via la fonction d'écoute de l'événement data de req, chaque fois que des données du corps de la requête sont reçues, elles sont accumulées dans la variable post. req.on('data', function(chunk){ post += chunk; }); //Une fois l'événement end déclenché, utilisez querystring.parse pour analyser post et en faire la requête POST réelle, puis renvoyez-la au client. req.on('end', function(){ post = querystring.parse(post); res.end(util.inspect(post)); }); }).listen(3000);

Le formulaire d'exemple suivant est soumis via POST et affiche les données :

Exemple

var http = require('http'); var querystring = require('querystring'); var postHTML = '<html><head><meta charset="utf-8"><title>Exemple de tutoriel Node.js Exemple</title></head>' + '<body>' + '<form method="post">' + 'Nom du site : <input name="name"><br>' + 'URL du site : <input name="url"><br>' + '<input type="submit">' + '</form>' + '</body></html>'; http.createServer(function (req, res) { var body = ""; req.on('data', function (chunk) { body += chunk; }); req.on('end', function () { //Analyser les paramètres body = querystring.parse(body); //Définir les informations d'en-tête de réponse et l'encodage res.writeHead(200, {'Content-Type': 'text/html; charset=utf8'}); if(body.name && body.url) { //Afficher les données soumises res.write("Nom du site :" + body.name); res.write("<br>"); res.write("URL du site :" + body.url); } else { //Afficher le formulaire res.write(postHTML); } res.end(); }); }).listen(3000);

Démo GIF du résultat d'exécution :

Autres extensions