MySql PHP JSON JQuery Ajax

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

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Articles récents
Commentaires récents
Catégories
Archives
%d blogueurs aiment cette page :