Il peut être utile, dans certains cas, de faire passer des paramètres par l'intermédiaire d'une URL lors d'une requête HTTP de type GET.
Créez une nouvelle application
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>Recherche par n° de fiche <input type='text' id="ident"></p>
<input type="submit" value="Rechercher">
</form>
<h3>résultat recherche</h3>
<div id="liste"></div>
</body>
</html>
script.js
$(function(){
function afficheFiche (){
var id=$('#ident').val();
$('#ident').val('');
$.ajax({
type:'GET',
url:'/api/affiche/'+id,
success:function(data){
$('#liste').html('');
if (data.stat!='no'){
$('#liste').append('<h3>Identifiant : n° '+id+'</h3>');
$('#liste').append('<p>Nom : '+data.nom+'</p>');
$('#liste').append('<p>Prénom : '+data.prenom+'</p>');
}
else{
$('#liste').append('<p>Désolé, la fiche n° '+id+' n\'existe pas</p>');
}
}
});
}
$('#monForm').on('submit',function(e){
e.preventDefault();
afficheFiche();
});
});
serveur.js
var ficheInfo=[
{
id:1,
nom:"Durand",
prenom:"Pierre"
},
{
id:2,
nom:"Dupont",
prenom:"Christophe"
},
{
id:3,
nom:"Martin",
prenom:"Michel"
}
]
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
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/:id', function(req, res) {
var flag=false;
for (var i=0;i<ficheInfo.length;i++) {
if (ficheInfo[i].id==req.params.id){
flag=true;
res.json(ficheInfo[i]);
}
}
if (!flag){
res.json({stat:'no'});
}
});
app.listen(8080);
Quelques explications :
Dans script.js, j'attire votre attention sur
$.ajax({ ...,url:'/api/affiche/'+id,....})
surtout sur la dernière partie de l'URL, d'où vient le "+id" ?
La seule véritable nouveauté se trouve dans le fichier serveur.js avec :
app.get('/api/affiche/:id',...
Ici, id est un paramètre (ce sont les 2 points placés juste avant qui lui donne ce statut de paramètre). Si l'URL est «/api/affiche/1» alors le «req.params.id» sera égal à 1. Si l'URL est «/api/affiche/5» alors le «req.params.id» sera égal à 5...
En règle générale, quand on aura une URL de type " /.../.../:parametre" on pourra utiliser ce paramètre dans la fonction de callback sous la forme req.params.parametre.
Il est tout à fait possible d'avoir plusieurs paramètres dans l'URL : "/.../.../:parametre1/:parametre2" que l'on retrouvera plus loin dans "req.params.parametre1" et "req.params.parametre2".
Créez une nouvelle application
Écrire le code nécessaire pour que la recherche ne porte plus sur le n° de fiche, mais sur le nom de la personne. Attention, il faudra qu'en cas d’homonyme, toutes les fiches correspondantes soient affichées.
Exemple :
si je pars du tableau suivant :
var ficheInfo=[ { id:1, nom:"Durand", prenom:"Pierre" }, { id:2, nom:"Dupont", prenom:"Christophe"}, { id:3, nom:"Martin", prenom:"Michel" }, { id:4, nom:"Martin", prenom:"Jean-Louis" }, { id:5, nom:"Durand", prenom:"Mathieu" } ]
La recherche « Durand » devra m'afficher les 2 fiches suivantes, nous devrons avoir comme réponse :
Fiche n°1
Nom : Durand
Prénom : Pierre
Fiche n°5
Nom : Durand
Prénom : Mathieu
Si le nom n'est pas trouvé (par exemple si l'utilisateur recherche "toto"), la réponse apportée devra être de la forme : "Désolé, M (ou Mme) toto n'est pas enregistré(e) chez nous".