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

ScreamFR Messages postés 73 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
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.
A voir également:

17 réponses

Réponse 1 / 17
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 2 / 17
ScreamFR Messages postés 73 Date d'inscription   Statut Membre Dernière intervention   3
 
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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 3 / 17
ScreamFR Messages postés 73 Date d'inscription   Statut Membre Dernière intervention   3
 
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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
et 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
Réponse 4 / 17
ScreamFR Messages postés 73 Date d'inscription   Statut Membre Dernière intervention   3
 
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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 17
ScreamFR Messages postés 73 Date d'inscription   Statut Membre Dernière intervention   3
 
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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 6 / 17
ScreamFR Messages postés 73 Date d'inscription   Statut Membre Dernière intervention   3
 
D'accord autant pour moi désole, j'avais mal compris.
ca fait rien dutout.

0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
C'est donc que tu dois avoir une erreur dans ton code... Ou un mauvais encodage du fichier.
0
Réponse 7 / 17
ScreamFR Messages postés 73 Date d'inscription   Statut Membre Dernière intervention   3
 
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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Et l'encodage de ton fichier ???
J'attends toujours..
0
Réponse 8 / 17
ScreamFR Messages postés 73 Date d'inscription   Statut Membre Dernière intervention   3
 
je ne sais pas comment te le montrer comme ca ?

0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Tu n'arrives pas à lire le lien que je t'avais donné ou tu ne comprends vraiment pas ??

Donc je te redonne le lien, en te disant qu'il faut regarder le chapitre 1
https://forums.commentcamarche.net/forum/affich-37584944-php-html-caracteres-accentues-et-l-utf8
0
Réponse 9 / 17
ScreamFR Messages postés 73 Date d'inscription   Statut Membre Dernière intervention   3
 
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
Réponse 10 / 17
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 11 / 17
ScreamFR Messages postés 73 Date d'inscription   Statut Membre Dernière intervention   3
 
Oui biensur,

0
Réponse 12 / 17
ScreamFR Messages postés 73 Date d'inscription   Statut Membre Dernière intervention   3
 
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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Et donc maintenant si tu fais ton appel en Ajax qu'as-tu dans la console du navigateur
0
Réponse 13 / 17
ScreamFR Messages postés 73 Date d'inscription   Statut Membre Dernière intervention   3
 
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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Ton JSON contient PLUSIEURS lignes issues de ta bdd.
Il te faut donc BOUCLER dessus.
0
Réponse 14 / 17
ScreamFR Messages postés 73 Date d'inscription   Statut Membre Dernière intervention   3
 
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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 15 / 17
ScreamFR Messages postés 73 Date d'inscription   Statut Membre Dernière intervention   3
 
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
Réponse 16 / 17
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 17 / 17
ScreamFR Messages postés 73 Date d'inscription   Statut Membre Dernière intervention   3
 
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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Dans ce cas tu peux mettre la discussion en résolue...
0

Discussions similaires

Colis shein terminal fret
Lele -
bazfile -

1 réponse