Il est possible d'utiliser une requête HTTP de type post afin d'envoyer des données vers le serveur (pour plus d'informations sur les requêtes HTTP de type post, consultez ce document.)
Créez une nouvelle application
Attention : dans cette nouvelle application, nous allons devoir utiliser un module supplémentaire : body-parser (voir les explications un peu plus bas)
Pour installer ce module, après avoir ouvert une console, placez-vous dans le répertoire de votre application (en théorie "express_a6_1") et tapez :
npm install body-parser
Vérifiez que le dossier "node_modules" contient bien le dossier "body-parser".
Saisissez, étudiez et testez cet exemple
index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
<form id="monForm">
<p>Nom <input type='text' id="nom"></p>
<p>Prénom <input type='text' id="prenom"></p>
<input type="submit" value="Valider" id="envoyer">
</form>
<div id="liste"></div>
</body>
</html>
script.js
$(function(){
function affiche (){
$.ajax({
type :'GET',
url : '/api/affiche',
success : function(data){
$('#liste').html('');
$('#liste').append('<h1>Liste des adhérents</h1>');
for (var i=0;i<data.length;i++){
$('#liste').append('<h3>Identifiant : n° '+(i+1)+'</h3>');
$('#liste').append('<p>Nom : '+data[i].nom+'</p>');
$('#liste').append('<p>Prénom : '+data[i].prenom+'</p>');
}
}
})
}
$('#monForm').on('submit',function(e){
e.preventDefault();
var nomForm=$('#nom').val();
var prenomForm=$('#prenom').val();
$.ajax({
type:'POST',
url:'/api/formulaire',
data:{nom:nomForm,prenom:prenomForm},
success:function(){
affiche();
$('#nom').val('');
$('#prenom').val('');
}
});
})
affiche();
});
serveur.js
var ficheInfo=[];
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use('/javascript', express.static(__dirname + '/javascript'));
app.use('/lib', express.static(__dirname + '/lib'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/', function (req, res) {
res.sendFile(__dirname + '/html/index.html');
});
app.get('/api/affiche', function(req, res) {
res.json(ficheInfo);
});
app.post('/api/formulaire', function(req,res) {
monPerso=req.body;
monPerso.id=1+ficheInfo.length
ficheInfo.push(monPerso);
res.send();
});
app.listen(8080);
Quelques explications :
Dans le fichier index.html nous utilisons une balise form, pour plus d'explications, relire ces activités.
En ce qui concerne le fichier script.js :
Nous utilisons une méthode de type POST pour effectuer notre requête HTTP de soumission du formulaire au serveur. Deux choses sont à noter :
fichier serveur.js
les lignes :
......
var bodyParser = require('body-parser');
......
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
......
sont indispensables à partir du moment où votre serveur reçoit du JSON (formulaire en provenance du client). Express utilise ce que l'on appelle un parseur (analyseur syntaxique en bon français) afin de pouvoir exploiter les données reçues.
app.post('/api/formulaire', function(req,res) {
monPerso=req.body;
monPerso.id=1+ficheInfo.length;
ficheInfo.push(monPerso);
res.send();
});
Nous traitons une requête de type POST. La fonction anonyme est exécutée dès que le serveur reçoit une requête HTTP de type POST à l'URL '/api/formulaire'.
Contenu de la fonction anonyme :
monPerso=req.body;
req.body (attribut body de l'objet req) contient les données contenues dans le formulaire envoyé par le client. Plus généralement, il contient les données transportées par la requête HTTP de type POST.
Je vous laisse analyser les 2 lignes suivantes :
....
monPerso.id=1+ficheInfo.length
ficheInfo.push(monPerso);
....
La dernière ligne :
res.send();
est très importante, car le client a fait une requête, il faut donc que le serveur réponde à cette requête. La réponse du serveur à un corps vide, mais cela n'a pas d'importance (il faut que le code 200 soit retourné au client : HTTP/1.1 200 OK).
Vous avez sans doute compris la technique employée dans ces exemples ("À faire vous-même 5.1" et "À faire vous-même 6.1") : le client envoie des "ordres" au serveur par l'intermédiaire des URL (1 "ordre" = 1 URL). Cette technique est très développée sur le web, on la dénomme REST.
De « grands acteurs » du web (Google, Facebook, twitter,....) fournissent ce que l'on appelle des API (Application Programming Interface), souvent basées sur REST, permettant aux développeurs de créer des applications capables d'interagir avec leurs serveurs. C'est comme cela que l'on voit fleurir, par exemple, des clients Twitter développés par des indépendants (Sobees, Tweeki,....).