Récupérer des données de PHP vers un fichier JS

ScreamFR -  
Bonjour je développe une petit application pour un projet de cours et j'aurai besoin d'aide s'il vous plait.

J'aimerai réaliser un petit script qui récupère des données depuis la BDD grâce au PHP et les affiches sur une page HTML dynamiquement grâce a JS.

Pour ce script j'ai 2 files :

index.html
test.php

--index.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>Home</title>
    <!-- favicon -->
    <link rel="icon" type="image/png" href="images/favicons/favicon.svg"/>
</head>
<body>

    <div id='all-card-services'>
        <p>Par default</p>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $.get("test.php?action=GetDataService").then(function(data) {
            // faire apparaitre les données sur le site dynamiquement. - id=all-card-services
            console.log(data);
        });
    </script>

</body>
</html>


--test.php 
<?php 

    header('content-type:text/html;charset=utf-8');
    session_start();
    require_once 'php/config/config.php';
    
    // $service = [
    //     'id_services' => '1',
    //     'title_services' => 'Developpement Web',
    //     'description_services' => "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux",
    //     'ionicons' => '67',
    //     'token' => '9117ef3f8586d00f51ee33cad1f3669aa0dcffec4ec94f0979b5b996fd2828fe7a56ff65dbcbd9a04114dd73a3ee3da35516722e41029caa0df6af44b72b9bc2'
    // ];
    
    // Récupération des données services dans la BDD
    $select = $bdd->prepare('SELECT * FROM services WHERE token = :token');
    $select->execute(array(
        'token' => $_SESSION['user']
    ));
    $service = $select->fetchAll();

    var_dump($service);

    echo json_encode($service); // Envoi des données services au format JSON

?>


Comment manipuler les données ?
J'essaye de faire apparaitre des infos dans la console mais rien de fou, l’objet est vide.

--Resultat console

- Les données sont bien récupérer en PHP et transformer au format JSON. (json_encode)

le console.log dans le fichier HTML affiche empty


Merci d'avance.

17 réponses

Résumé de la discussion

Le sujet porte sur un script qui récupère des données d'une base via PHP et les affiche dynamiquement en HTML avec JavaScript, mais la console affiche systématiquement un objet vide. L'implémentation utilise index.html et test.php, avec une requête $.get sur test.php?action=GetDataService et un fetchAll() suivi d'un json_encode(), mais le résultat JSON ne remplit pas l'affichage côté client. Des conseils soulignent d'envoyer du JSON avec le bon type MIME (application/json), d'activer l'affichage des erreurs PHP et de vérifier l'encodage UTF-8 pour éviter les caractères ambigus. En parallèle, certains échanges évoquent l'utilisation de $.getJSON, la vérification de la présence d'un token en session et l'importance de tester dans un navigateur dédié au debugging comme Firefox.

Bobot (l’IA à votre service)
  1. jordane45 Modérateur
    Bonjour,

    Commence par virer ton header... puisque tu veux retourner du JSON et non du HTML 
     header('content-type:text/html;charset=utf-8');

    ou change le en content json

    Ensuite, pour voir si ça fonctionne il faut en effet regarder dans la console de ton navigateur
    Pour ça, je t'invite fortement à utiliser firefox (qui est largement mieux pour débuguer l'ajax) et à bien penser à activer le debug du xhr


    ça te permettra de voir tes "requêtes" passer .. et d'en voir les réponses ou les erreurs.

    Au passage, pour récupérer du JSON en $.get il vaut mieux utiliser la fonction $.getJSON 

     $.getJSON("test.php?action=GetDataService", function(result){
    $.each(result, function(i, field){
       console.log(i,field);
    });
  });

    0
    1. ScreamFR Auteur
      Merci beaucoup pour ta réponse mais rien ne change dans la console plus rien ne s'affiche.



      Et je ne comprend pas ce que réalise le $.each (Ca permet de bouclé un object ? )

      --test.js 
      $.getJSON("test.php?action=GetDataService", function (result) {
    $.each(result, function (i, field) {
        console.log(i, field);
    });
});


      --test.php 
      <?php 
    header('content-type:json;charset=utf-8');
    session_start();
    require_once '../php/config/config.php';
    
    // Récupération des données services dans la BDD
    $select = $bdd->prepare('SELECT * FROM services WHERE token = :token');
    $select->execute(array(
        'token' => $_SESSION['user']
    ));
    $service = $select->fetchAll();

    echo json_encode($service); // Envoi des données services au format JSON

?>


      J'ai bien pensé à vider le cache.
      0
      1. jordane45 Modérateur
        Tu peux tester avec $.ajax ? 

         $.ajax({
        url: 'test.php?action=GetDataService',
        type: 'GET',
        datatype: 'json',
        success: function (data) { 
           console.log('data',data);
         },
        error: function (jqXHR, textStatus, errorThrown) { 
           console.log('Erreur AJAX',jqXHR,textStatus); 
         }
    });

        et dans le php vire également le header.

        NB: Attention, tes fichiers doivent être encodé en utf8 sans BOM
        voir chapitre 1 ici : https://forums.commentcamarche.net/forum/affich-37584944-php-html-caracteres-accentues-et-l-utf8
        0
    2. ScreamFR Auteur
      J'ai remplacer $.get par le $.ajax etc.
      Et cette fois ci dans la console il y a empty comme au départ.

      Résultat de la console :


      --index.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>Home</title>
    <!-- favicon -->
    <link rel="icon" type="image/png" href="../images/favicons/favicon.svg" />
</head>

<body>
    <div id='all-card-services'>
        <p>Par default</p>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="test.js"></script>
</body>
</html>


      --test.js 
      $.ajax({
    url: 'test.php?action=GetDataService',
    type: 'GET',
    datatype: 'json',
    success: function (data) {
        console.log('data', data);
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log('Erreur AJAX', jqXHR, textStatus);
    }
});


      --test.php 
      <?php 
    session_start();
    require_once '../php/config/config.php';
    
    // Récupération des données services dans la BDD
    $select = $bdd->prepare('SELECT * FROM services WHERE token = :token');
    $select->execute(array(
        'token' => $_SESSION['user']
    ));
    $service = $select->fetchAll();

    echo json_encode($service); // Envoi des données services au format JSON
?>
      0
      1. jordane45 Modérateur
        Tu peux mettre l'URL directement dans ton navigateur et nous faire une capture écran du résultat ?

        Il serait bien également d'arrêter/relancer ton serveur web
        parfois il y a un cache qui gêne...
        0
      2. jordane45 Modérateur
        @jordane45et puis, tu ne m'as pas dit .. tu as bien vérifié l'encodage de tes fichiers ? tu peux nous en mettre (les vérifications) des captures écran stp..
        0
    3. ScreamFR Auteur
      Oui bien sur, voici le screen de la page, après avoir relance mon serveur web.



      Je suis désole mais je n'ai pas compris quand tu ma demande de vérifier l'encodage comment faire ?
      On défini l'encodage dans le fichier HTML dans le head ?
      ici ------------------>


      Désole si je me trompe ...
      0
      1. jordane45 Modérateur
        Comment se fait t'il que tu aies du Html dans la page appellée par ton ajax ??
        Normalement, tu ne devrais y avoir que le code php que tu nous as montré avant...
        Et pour ce qui est de vérifier l'encodage.. je t'ai donné un lien qui explique tout ..
        L'as tu au moins regardé ???
        0
    5. ScreamFR Auteur
      Non j'ai pas du HTML dans la page appelé par le script.

      J'ai 3 page :
      Index.html -> div permettant d'afficher.
      test.js --> avec la requete ajax
      test.php -> avec le traitement

      Oui j'ai regardé le lien, j'ai lu mais je ne voit pas ce qui me manque, j'ai supprimer le header() de tout a l'heure.
      Je ne dois pas le remettre ?
      0
      1. jordane45 Modérateur
        Quand je t'ai demandé de tester l'url dans ton navigateur.. c'est celle appellée par ton ajax que je veux voir ...
        là tu m'as montré un fichier test.html ..... moi c'est
        test.php?action=GetDataService
        0
    6. ScreamFR Auteur
      D'accord autant pour moi désole, j'avais mal compris.
      ca fait rien dutout.

      0
      1. jordane45 Modérateur
        C'est donc que tu dois avoir une erreur dans ton code... Ou un mauvais encodage du fichier.
        0
    7. ScreamFR Auteur
      Problématique tout ca ;)

      Récap de toutes mes pages, je ne voit pas ou ca marche pas.

      index.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>Home</title>
    <!-- favicon -->
    <link rel="icon" type="image/png" href="../images/favicons/favicon.svg" />
</head>

<body>
    <div id='all-card-services'>
        <p>Par default</p>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="test.js"></script>
</body>

</html>


      test.js 
      $.ajax({
    url: 'test.php?action=GetDataService',
    type: 'GET',
    datatype: 'json',
    success: function (data) {
        console.log('data', data);
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log('Erreur AJAX', jqXHR, textStatus);
    }
});


      test.php 
      <?php 
    session_start();
    require_once '../php/config/config.php';
    
    // Récupération des données services dans la BDD
    $select = $bdd->prepare('SELECT * FROM services WHERE token = :token');
    $select->execute(array(
        'token' => $_SESSION['user']
    ));
    $service = $select->fetchAll();

    echo json_encode($service); // Envoi des données services au format JSON
      0
      1. jordane45 Modérateur
        Et l'encodage de ton fichier ???
        J'attends toujours..
        0
    9. ScreamFR Auteur
      J'avais pas compris de quelle lien tu parlé, autant pour moi.

      j'ai rien touché c'est déja encoder en UTF-8



      idem pour les autres fichiers.
      0
      1. jordane45 Modérateur
        Essaye ça et dis nous ce que ça te donne 
        
<?php 
//démarrage session
session_start();
  
  
//affichage des erreurs PHP dans la page pour être sûr de ne rien laisser trainer...
error_reporting(E_ALL);
ini_set('display_errors', true);
ini_set('display_startup_errors', true);

require_once '../php/config/config.php';

//récupération PROPRE des variables AVANT de les utiliser
$token = !empty($_SESSION['user']) ? $_SESSION['user'] : NULL;

//on vérifie si on a bien un token avant de continuer ...
if(!$token){
   echo json_encode(['ERROR'=> "Aucun token présent....", 'SESSION'=>$_SESSION]);
   exit;
}


//préparation de la requête et des variables 
$sql = 'SELECT * FROM services WHERE token = :token';
$datas = [ 'token' => $token];

//exécution de la requête proprement...
try{
  $select = $bdd->prepare($sql);
  $select->execute($datas);
  $service = $select->fetchAll();
}catch(Exception $e){
   echo json_encode(['ERROR'=> $e->getMessage()]);
   exit;
}  


if(!empty($service)){
  echo json_encode($service); // Envoi des données services au format JSON
  exit;
}else{
  echo json_encode(['ERROR'=>'AUCUN RESULTAT']);
  exit;
}

        0
        2. ScreamFR Auteur
          Oups j'ai pas ajouté de donnée a la bdd.
          Ducoup ca retourne

          data [{"id_services":"1","0":"1","title_services":"Developpement Web","1":"Developpement Web","description_services":" manus comminus conserendas denseta scutorum conpage semet scientissime praestruebant, ausos quoque aliquos.","ionicons":"66","3":"66","token":"a6647700e19a93ebb5b7c32c3590875b0eca810791217bc99880d04126a2df3f9c8c3e1f2c4df6953bdd249f12d653692e12386f23772e3742cb402bf940f11d","4":"a6647700e19a93ebb5b7c32c3590875b0eca810791217bc99880d04126a2df3f9c8c3e1f2c4df6953bdd249f12d653692e12386f23772e3742cb402bf940f11d"},{"id_services":"2","0":"2","title_services":"Droniste","1":"Droniste","description_services":"zzzzzzzz.","ionicons":"67","3":"67","token":"a6647700e19a93ebb5b7c32c3590875b0eca810791217bc99880d04126a2df3f9c8c3e1f2c4df6953bdd249f12d653692e12386f23772e3742cb402bf940f11d","4":"a6647700e19a93ebb5b7c32c3590875b0eca810791217bc99880d04126a2df3f9c8c3e1f2c4df6953bdd249f12d653692e12386f23772e3742cb402bf940f11d"}]
          0
          1. jordane45 Modérateur
            Et donc maintenant si tu fais ton appel en Ajax qu'as-tu dans la console du navigateur
            0
        3. ScreamFR Auteur
          Yes super dans la console je vois l'object :


          Mais le soucis n'est pas réglé quand dans mon js j'essaye du coup d'afficher les informations, ça ne fonctionne pas ( undefined )
          Quand j'essaye de ciblé une donnée : 
           data.id_services

          ca trouve rien.

          --index.js 
          $.ajax({
    url: 'test.php?action=GetDataService',
    type: 'GET',
    datatype: 'json',
    success: function (data) {
        console.log(data.id_services); // ici
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log('Erreur AJAX', jqXHR, textStatus);
    }
});


          le résultat du console log -> 'undefined'

          J'aimerai maintenant afficher dans des cards les données mais j'arrive pas a les récupérer en js.
          Désole je suis vraiment une dinde ;')
          0
          1. jordane45 Modérateur
            Ton JSON contient PLUSIEURS lignes issues de ta bdd.
            Il te faut donc BOUCLER dessus.
            0
        4. ScreamFR Auteur
          Yes j'ai regardé sur une boucle for qui boucle sur un object js, mais ducoup ca me coupe tout :
          j'ai 2778 message dans la console.

          Ca me découpe la chaine de caractère, 1 par 1



          et voici le code qui permet de boucler ( je suis pas sur que ça soit le bon ) 

          $.ajax({
    url: 'test.php?action=GetDataService',
    type: 'GET',
    datatype: 'json',
    success: function (data) {
        for(var service of Object.getOwnPropertyNames(data))
        {
            const Service = data[service];
            console.log(service,":",Service);
        }
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log('Erreur AJAX', jqXHR, textStatus);
    }
});
          0
          1. jordane45 Modérateur
            Tu sais que je t'avais donné un exemple dans une de mes premières réponse ? 

             $.each(data, function (i, row) {
        console.log(i, row); // affiche une ligne 
        
         //pour afficher un élément de cette ligne...
         console.log('service', row.id_services);

    });
            0
        5. ScreamFR Auteur
          Oui j'ai essayé mais c’a na pas fonctionné, quand tu m'a dit boucle c'est la premier chose à laquelle j'ai pensé :)



          C'est quoi le in opérator ?
          0
          1. jordane45 Modérateur
            Tu peux tester ça et me montrer ce que ça t'affiche dans la console ? 

            $.ajax({
    url: 'test.php?action=GetDataService',
    type: 'GET',
    datatype: 'json',
    success: function (response) {
        console.log("response ajax",response);
         if (typeof(response) === "object" && response !== null) {
            console.log("OK, c'est bien du json..");
        }else{
           console.log("on le parse en json");
           response = JSON.parse(response);
        }
        
        //on boucle dessus
        $.each(response,function(i,el){
          console.log(i,el);
        });
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log('Erreur AJAX', jqXHR, textStatus);
    }
});

            0
            1. ScreamFR Auteur
              Oui je pense que ca fonctionne il n'y a pas d'erreur.

              Retour de la console :


              et j'arrive a chopper les données en fesant 
              el[0] -> id_services , el[1] -> title_services ... etc
              0
              1. jordane45 Modérateur
                Dans ce cas tu peux mettre la discussion en résolue...
                0

            Discussions similaires

            question pix mot caché
            aorum10

            7 réponses
            smarphone écran cassė (noir): comment récupérer ses données?
            camsin

            7 réponses