Batch Forum Index
RegisterSearchFAQMemberlistUsergroupsLog in
Reply to topic Page 1 of 1
[PHP] Renvoyer un Array à JS
Author Message
Reply with quote
Post [PHP] Renvoyer un Array à JS 
Hello les gens,

je vois beaucoup de tuto où il est proposé de traiter une action en PHP, et ce même PHP construit le DOM et le renvoi au JS !
Ce n'est pas du tout la bonne méthode, le PHP ne devrait renvoyer QUE les informations demandées par JS et lui renvoyer brutes, sans construction du DOM.
C'est ensuite à JS de traiter les informations dans le DOM !!!
J'entend aussi dire que ce n'est pas simple quand c'est un Array qu'il faut renvoyer et traiter.

On va donc voir tout ça !

On va travailler pour cet exemple avec un fichier XML nommé liste.xml dont on veut extraire les données:
Code:

<?xml version="1.0"?>
<tuto>
   <personne name="robert" age="54" hobby="puzzle"/>
   <personne name="hector" age="61" hobby="lecture"/>
   <personne name="zitoun" age="42" hobby="cube"/>
   <personne name="maxime" age="31" hobby="moto"/>
   <personne name="norbert" age="34" hobby="cuisine"/>
   <personne name="patrick" age="52" hobby="bricolage"/>
</tuto>


D'autre part, voici le code HTML + JS qui va nous servir pour appeler le PHP:
Code:

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>

      <button onclick="badMethod();">Liste des Personnes du XML</button>
      <div id="ContainList"></div>
      <script>
         
         function badMethod(){

            var xhr = new XMLHttpRequest();
            var Url = './BadMethod.php';
            xhr.open("GET",Url,true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = function(){
         
               if (this.readyState == 4 && this.status == 200){

                  document.getElementById('ContainList').innerHTML = this.responseText;
                  
               } //END IF
         
            } // END XHR

         } // END FUNCTION
         
      </script>
   </body>
</html>


On peut voir la fonction badMethod() qui demande au PHP des infos, et qui va simplement placer le retour dans un DIV.

pour ce test qui à mon sens est un très mauvais usage de PHP, voici le code:
Code:

<?php

   // Notre XML
    $XmlPath = './liste.xml';

   // Un petit compteur
    $CountPersonne = 1;
   // On charge le XML
    $XmlLoaded = simplexml_load_file($XmlPath);

   // Pour chaque balise 'personne'
    foreach($XmlLoaded->personne as $personne){

      // on écrit directement le DOM
      echo $CountPersonne. ', Prénom: ' .$personne['name']. ', Age: ' .$personne['age']. ', Hobby: ' .$personne['hobby']. '<br>';
        $CountPersonne++;

    } // ENF FOREACH

?>


Clairement, le PHP écrit un bout de DOM et JS va juste insérer ce bout de DOM dans le DOM.
Ici aucune flexibilité quand à l'usage des informations retournées ...

En fait ce que nous voulons c'est juste les info, PHP doit nous renvoyer uniquement les données qu'on lui demande.
Et c'est très simple, voici le code HTML + JS pour cet exemple:
Code:

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>

      <button onclick="getPersonneList();">Liste des Personnes du XML</button>
      <div id="ContainList"></div>
      
      <script>
      
         function getPersonneList(){

            var xhr = new XMLHttpRequest();
            var Url = './GetPersonneList.php';
            xhr.open("GET",Url,true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = function(){
         
               if (this.readyState == 4 && this.status == 200){

                  // On Formate l'array renvoyé par PHP
                  var PersonneList = JSON.parse(this.responseText);
                  // on l'envoi à une fonction d'affichage
                  displayPersonneList(PersonneList);
                  
               } //END IF
         
            } // END XHR

         } // END FUNCTION
         
         function displayPersonneList(PersonneList){
         
            // on clear le container
            document.getElementById('ContainList').innerHTML = '';
         
            // pour chaque ligne de l'array
            for ( var PersonneIndex in PersonneList ){
            
               // on affiche les attributs
               document.getElementById('ContainList').innerHTML += PersonneIndex + ', Prénom: ' + PersonneList[PersonneIndex].name;
               document.getElementById('ContainList').innerHTML += ', Age: ' + PersonneList[PersonneIndex].age;
               document.getElementById('ContainList').innerHTML += ', Hobby: ' + PersonneList[PersonneIndex].hobby + '<br>';

               
            } // END FOR
         
         } // END FUNCTION
         
      </script>
   </body>
</html>


On voit ici que JS reçoit un array de PHP et le traite comme il veut.
C'est totalement différent car ici on a l'info brute et non un morceau de DOM !
Voici le PHP qui renvoi cet array:
Code:

<?php

   // Notre XML
    $XmlPath = './liste.xml';

   // Un petit compteur
    $CountPersonne = 1;
   // On charge le XML
    $XmlLoaded = simplexml_load_file($XmlPath);

   // Pour chaque balise 'personne'
    foreach($XmlLoaded->personne as $personne){

      // on assigne un attribut à l'array
        $ExtractArray[$CountPersonne]['name'] = (string) $personne['name'];
        $ExtractArray[$CountPersonne]['age'] = (string) $personne['age'];
      $ExtractArray[$CountPersonne]['hobby'] = (string) $personne['hobby'];
        $CountPersonne++;

    } // ENF FOREACH

   // on retourne l'array au JS
    echo json_encode($ExtractArray);

?>


Voici donc une bonne pratique à avoir de l'utilisation de JS + PHP:
1 _ JS à besoin d'une info
2 _ JS demande à PHP cette info
3 _ PHP renvoi l'info brute à JS
4 _ JS traite l'info

Voilà c'est fini pour aujourd'hui !




______________________________________________________


L'ignorance est un fléau qui engendre la haine et la mort
La connaissance est une arme qui surpasse toutes les autres
Partagez votre savoir, sinon il sera perdu à jamais
Post Publicité 
PublicitéSupprimer les publicités ?


Reply with quote
Post [PHP] Renvoyer un Array à JS 
Pour completer cette excellent tuto !
On a des outils bien plus puissants et flexible en utilisant les promises ES6 on peut utiliser window.fetch :

Code:
fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function() {
  console.log("Booo");
});


et en utilisant les promises ES7 async/wait (les requisitions synchrones étant deconseillé) :

Code:
async function fetchAsync (url) {
  let response = await fetch(url);
  let data = await response.json();
  return data;
}


Okay




______________________________________________________
Post [PHP] Renvoyer un Array à JS 


Display posts from previous:
Reply to topic Page 1 of 1
  



Index | Getting a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Copyright 2008 - 2016 // Batch