Exemple de javascript pour récupérer un fichier json avec une méthode POST. À utiliser avec des formulaires de recherche, de contact, des espaces de connexion…
Dans la partie HTML, on a un formulaire de recherche. La partie Javascript va se charger de récupérer la zone de saisie, d’envoyer avec la méthode POST les données du formulaire au fichier search.php.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch</title>
</head>
<body>
<div>
<form action="index.php" method="POST" id="formRecherche">
<input id="recherche" name="recherche" type="text" value="isaac">
<input id="envoyer" type="submit" value="OK">
</form>
<div id="resultats"></div>
</div>
<script src="app.js" defer></script>
</body>
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch</title>
</head>
<body>
<div>
<form action="index.php" method="POST" id="formRecherche">
<input id="recherche" name="recherche" type="text" value="isaac">
<input id="envoyer" type="submit" value="OK">
</form>
<div id="resultats"></div>
</div>
<script src="app.js" defer></script>
</body>
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch</title>
</head>
<body>
<div>
<form action="index.php" method="POST" id="formRecherche">
<input id="recherche" name="recherche" type="text" value="isaac">
<input id="envoyer" type="submit" value="OK">
</form>
<div id="resultats"></div>
</div>
<script src="app.js" defer></script>
</body>
</html>
La partie Javascript attends le click sur le bouton de soumission du formulaire. On intercepte le click, on arrête de traiter le formulaire, on récupérer les données avec FormData, et on les envoi à search.php
let formRecherche = document.getElementById('formRecherche');
let envoyer = document.getElementById('envoyer');
let resultats = document.getElementById('resultats');
envoyer.addEventListener("click", lanceRecherche, false);
function lanceRecherche(event) {
// Ne soumet pas le formulaire
event.preventDefault();
// Récupère les données du formulaire
var saisie = new FormData(formRecherche);
// Lance la recherche
fetch('search.php', {
method: 'POST',
body: saisie
}).then((response) => {
return response.json();
}).then((data) => {
// Affiche les résultats
let ul = document.createElement("ul");
for (const element in data) {
var li = document.createElement("li");
li.innerHTML = data[element];
ul.appendChild(li);
}
resultats.innerHTML = '';
resultats.appendChild(ul);
}).catch((error) => {
console.log('Erreur : ' + error.message);
});
}
let formRecherche = document.getElementById('formRecherche');
let envoyer = document.getElementById('envoyer');
let resultats = document.getElementById('resultats');
envoyer.addEventListener("click", lanceRecherche, false);
function lanceRecherche(event) {
// Ne soumet pas le formulaire
event.preventDefault();
// Récupère les données du formulaire
var saisie = new FormData(formRecherche);
// Lance la recherche
fetch('search.php', {
method: 'POST',
body: saisie
}).then((response) => {
return response.json();
}).then((data) => {
// Affiche les résultats
let ul = document.createElement("ul");
for (const element in data) {
var li = document.createElement("li");
li.innerHTML = data[element];
ul.appendChild(li);
}
resultats.innerHTML = '';
resultats.appendChild(ul);
}).catch((error) => {
console.log('Erreur : ' + error.message);
});
}
let formRecherche = document.getElementById('formRecherche');
let envoyer = document.getElementById('envoyer');
let resultats = document.getElementById('resultats');
envoyer.addEventListener("click", lanceRecherche, false);
function lanceRecherche(event) {
// Ne soumet pas le formulaire
event.preventDefault();
// Récupère les données du formulaire
var saisie = new FormData(formRecherche);
// Lance la recherche
fetch('search.php', {
method: 'POST',
body: saisie
}).then((response) => {
return response.json();
}).then((data) => {
// Affiche les résultats
let ul = document.createElement("ul");
for (const element in data) {
var li = document.createElement("li");
li.innerHTML = data[element];
ul.appendChild(li);
}
resultats.innerHTML = '';
resultats.appendChild(ul);
}).catch((error) => {
console.log('Erreur : ' + error.message);
});
}
Le fichier search.php nous retourne dans tous les cas, un tableau json dont le premier élément est la donnée saisie par l’utilisateur. Le fichier search.php devrait faire une requête SQL pour nous retourner des résultats réels.
<?php
header('Content-Type: application/json');
$recherche = "La recherche " . $_POST['recherche'];
$resultats = array(
$recherche,
'Brian Aldiss',
'Isaac Asimov',
'James Graham Ballard',
'René Barjavel',
'Alfred Bester',
'Pierre Boulle',
);
echo json_encode($resultats);
<?php
header('Content-Type: application/json');
$recherche = "La recherche " . $_POST['recherche'];
$resultats = array(
$recherche,
'Brian Aldiss',
'Isaac Asimov',
'James Graham Ballard',
'René Barjavel',
'Alfred Bester',
'Pierre Boulle',
);
echo json_encode($resultats);
<?php
header('Content-Type: application/json');
$recherche = "La recherche " . $_POST['recherche'];
$resultats = array(
$recherche,
'Brian Aldiss',
'Isaac Asimov',
'James Graham Ballard',
'René Barjavel',
'Alfred Bester',
'Pierre Boulle',
);
echo json_encode($resultats);