Voici comment récupérer dans une page HTML des données issues d’une base de données MYSQL
1°) Fichier PHP pour formater en JSON les données issues de la base
<?php
//-- Header obligatoire pour gérer les accents
header('Content-type: text/html; charset=iso-8859-1');
//-- appel http://xxx.com/testdb3.php?=&trans=M&ligne=14
//-- Où trans = 'M'etro 'B'us 'R'er 'BT'ramway ou train 'S'ncf
//-- Retourne une chaîne JSON structurée :
/* {"Ligne":"M14",
* "Aller":"SAINT-LAZARE",
* "Retour":"OLYMPIADES",
* "Arrets":[{"Station":"Bercy","Code":"138"},
* {"Station":"Châtelet","Code":"200"}]*/
///////////////////////////
//-- Paramètres
$mode_trans = $_GET["trans"];
$num_ligne = $_GET["ligne"];
//-- Initialisation du JSON retour
$varligne='{"Ligne":"'.$mode_trans.$num_ligne.'",';
//-- Variables de connection à la base
$host = "xxx.com";
$user = "zzz";
$pass = "ppp";
$databaseName = "zzz_trans";
//-- Connection à la base de données
$mysqli = new mysqli($host,$user,$pass,$databaseName);
//-- Connection à la base
if ($mysqli->connect_errno) {
echo "Echec lors de la connexion à MySQL : (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
else
{
//-- Recherche des terminus
$query = "SELECT * FROM termlist where ligne='".$num_ligne."'";
$result = mysqli_query($mysqli, $query);
while ($row = mysqli_fetch_assoc($result)) {
$varligne=$varligne.'"Aller":"'.$row["Aller"].'","Retour":"'.$row["Retour"].'","Arrets":[';
}
mysqli_free_result($result);
//-- Recherche des stations
$query = "SELECT * FROM stoplist where LIGNE='".$mode_trans.$num_ligne."'";
$result = mysqli_query($mysqli, $query);
while ($row = mysqli_fetch_assoc($result)) {
$varligne=$varligne.'{"Station":"'.$row["ARRET"].'","Code":"'.$row["CODE"].'"},';
}
//-- Retourne le résultat
$resjson=substr($varligne, 0, strlen($ma_chaine)-1).']}'; //.';'
echo $resjson;
//-- Libération des résultats
mysqli_free_result($result);
//-- Fermeture de la connexion
mysqli_close($mysqli);
}
?>
2°) Page HTML :
<script>
$().ready(function() {
$.ajax (
{url : "http://xxx/testdb3.php?&trans=M&ligne=14",
complete : function (xhr, result)
{ if (result != "success") return;
var sTrains=xhr.responseText;
//-- Résultat brut
console.log(sTrains);
//-- Transformation en JSON
var json = JSON.parse(sTrains);
//-- Récupération des résultats
var res=json.Ligne;
var res2=json.Arrets[1].Station;
console.log(res2);
}
});
});
</script>
Pour voir la liste complète des paramètres $ajax().
- url: URL à laquelle envoyer la requête.
- data: données envoyées destinées à être traitées par l’url
2 syntaxes : JSON (Javascript Object notation) {nom1: valeur1, nom2: valeur2} ou chaine au « format get » nom1=valeur1&nom2=valeur2& .. - processData: mis à « false » si on ne veut inhiber la conversion des « data » à la syntaxe « chaine » ci-dessus, avec encodage url
- dataType: type de données attendue du serveur en retour de la requête : xml, html, script,json
- type: type de requête POST or GET (GET par défaut; dans ce cas l’éventuel data est ajouté à l’url sous la forme usuelle nom1=valeur1&… ).
- timeout: temps d’attente maximum (en ms) du retour de la réponse.
- error: précise la fonction à appeler si la requête échoue
- success: fonction appelée en cas de succès.
- complete: fonction appelée en fin de requête (que ce soit succès ou échec).
- async: requête asynchrone ? (true par défaut).
Votre commentaire