Petit problème ajax avec JSON

Petit problème ajax avec JSON - HTML/CSS - Programmation

Marsh Posté le 30-08-2013 à 19:17:48    

Bonjour à tous,
 
Je suis vraiment coincé. Etant débutant avec ajax, je suis parti d'un script qui fonctionne très bien pour le comprendre.
J'arrive à suivre sauf pour ceci:

Code :
  1. // résultats
  2.     while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
  3.  $json[$donnees['id_client']][] = utf8_encode($donnees['nom']);
  4.     }
  5.    
  6.     echo json_encode($json);


 
Le résultat est bon, il m'envoie bien 2 données que je récupère sur ma page principale pour créer un tableau comme ceci:

Code :
  1. $.ajax({
  2.    url: 'test2.php',
  3.    data: 'id_type='+ val, // on envoie $_GET['id_type']
  4.    dataType: 'json',
  5.    success: function(data) {
  6.     $.each(data, function(value1, value2) {
  7.      $gamme.append('<tr><td>'+ value1 +'</td><td>'+ value2 +'</td></tr>');
  8.     });
  9.    }
  10.   });


 
Ce que je voudrais ca ajouter d'autres valeurs dans mon tableau.
Pour les récupérer, j'imagine que je fais simplement:

Code :
  1. $.ajax({
  2.    url: 'test2.php',
  3.    data: 'id_type='+ val, // on envoie $_GET['id_type']
  4.    dataType: 'json',
  5.    success: function(data) {
  6.     $.each(data, function(value1, value2, value3) {
  7.      $gamme.append('<tr><td>'+ value1 +'</td><td>'+ value2 +'</td><td>'+ value3 +'</td></tr>');
  8.     });
  9.    }
  10.   });


Mais comment faire pour envoyer au moins trois valeurs en json???
Donc comment modifier cette ligne pour envoyer 3 valeurs?

Code :
  1. $json[$donnees['id_client']][] = utf8_encode($donnees['nom']);


 
Merci pour votre aide!

Reply

Marsh Posté le 30-08-2013 à 19:17:48   

Reply

Marsh Posté le 30-08-2013 à 22:50:01    

Par exemple, pour la partie PHP :

Code :
  1. $json[$donnees['id_client']][] = array (
  2.     'nom' => utf8_encode ($donnees['nom'],
  3.     'prenom' => utf8_encode ($donnees['prenom'],
  4.     'adr' => utf8_encode ($donnees['adresse'])
  5.   );


 
et pour la partie JS :

Code :
  1. var callback = function (data)
  2.     {
  3.         $.each (data, function (valeur, index)
  4.         {
  5.          $gamme.append ('<tr><td>nom : '+ valeur.nom +'</td></tr>');
  6.          $gamme.append ('<tr><td>prenom ' + valeur.prenom +'</td></tr>');
  7.          $gamme.append ('<tr><td>prenom ' + valeur.adr +'</td></tr>');
  8.           // bien sur, on pourrait boucler avec une boucle 'for in' ou un $.each aussi d'ailleurs
  9.         });
  10.     };
  12.     $.ajax ({
  13.        url: 'test2.php',
  14.        data: 'id_type=' + val,
  15.        dataType: 'json',
  16.        success: callback
  17.     });


 
Pas testé, mais ca devrait le faire :)


Message édité par SICKofitALL le 30-08-2013 à 22:51:47

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 31-08-2013 à 08:57:51    

Merci pour ton aide.
Je comprends une partie de mon erreur, mais malheureusement, ton code ne fonctionne pas et je ne vois vraiment pas pourquoi...
Un petit coup de main stp...

Reply

Marsh Posté le 31-08-2013 à 09:04:51    

en allant directement sur ma page test2.php, j'ai trouvé une erreur, il manquait les ) aux lignes 2 et 3. Malgré ça, rien ne ressort... :(

Reply

Marsh Posté le 31-08-2013 à 09:48:40    

si je fais un var_dump de ma page php, pas de souci, j'ai les infos.
par contre, rien ne sort sur ma page principale...

Reply

Marsh Posté le 31-08-2013 à 09:58:31    

Tu as une page de test ou je peux capter le code PHP + JS ?


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 31-08-2013 à 10:16:15    

Tout d'abord je te remercie de prendre le temps de m'aider. Je sais qu'on n'est pas loin, mais qqch m'échappe.
 
 
Ma page php fonctionne bien grâce à toi. En voici le détail (j'ai juste enlever les données de connexion à la bdd)

Code :
  1. <?php
  3. header('Content-type: application/json');
  5. if(isset($_GET['id_type'])) {
  7.     $json = array();
  9.         $id = htmlentities(intval($_GET['id_type']));
  10.         // requête qui récupère les départements selon la région
  11.         $requete = "SELECT * FROM produits WHERE code_barre = ". $id ." ORDER BY code_barre";
  13.    
  14.     // connexion à la base de données
  15.     try {
  16.         $bdd = new PDO();
  17.     } catch(Exception $e) {
  18.         exit('Impossible de se connecter à la base de données.');
  19.     }
  20.     // exécution de la requête
  21.     $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
  22.    
  23.     // résultats
  24.     while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
  25.         // je remplis un tableau et mettant l'id en index (que ce soit pour les régions ou les départements)  
  26.  //$json[$donnees['libelle']][] = utf8_encode($donnees['code_barre']);  
  27.  $json[$donnees['id_produit']][] = array (
  28.   'nom' => utf8_encode ($donnees['libelle']),
  29.   'prenom' => utf8_encode ($donnees['prix_vente']),
  30.   'adr' => utf8_encode ($donnees['code_barre'])
  31.    );
  33.     }
  34.    
  35.     // envoi du résultat au success
  36.     echo json_encode($json);
  38. }
  39. ?>


merci!!!


Message édité par bingojm le 31-08-2013 à 17:05:06
Reply

Marsh Posté le 31-08-2013 à 11:22:16    

Remplace ton code JS par ca :

Code :
  1. $(document).ready (function ()
  2. {
  3.  var $type = $('#type'),
  4.   $gamme = $('#gamme');
  6.  $type.on ('change', function ()
  7.   {
  8.    var val = $(this).val ();
  10.    if(val !== '')
  11.    {
  12.     $.ajax ({
  13.        url:  'test2.php',
  14.        data: 'id_type=' + val,
  15.        dataType:'json',
  16.        success: function (data)
  17.       {
  18.        console.log (data); // à commenter si aucun debugeur JS
  19.        $.each (data, function (valeur, index)
  20.         {
  21.          console.log (valeur); // à commenter si aucun debugeur JS
  22.          $gamme.append ('<tr><td>nom : ' + valeur.nom + '</td></tr>');
  23.          $gamme.append ('<tr><td>prenom ' + valeur.prenom + '</td></tr>');
  24.          $gamme.append ('<tr><td>prenom ' + valeur.adr + '</td></tr>');
  25.          // bien sur, on pourrait boucler avec une boucle 'for in' ou un $.each aussi d'ailleurs
  26.         });
  27.       }
  28.     });
  29.    }
  30.   });
  31. });


 
A priori il y avait une erreur de syntaxe dans le JS. Utilises-tu des outils tel que Firebug ou les outils de dev de Firefox (ctrl+shift+k) ou Chrome (F12) ?
Tu disposes d'une console, avec les fonctions console.log (à commenter donc si tu utilies un autre browser), on peut afficher des infos dans celle-ci.


Message édité par SICKofitALL le 31-08-2013 à 11:41:47

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 31-08-2013 à 11:40:11    

Je n'utilise pas ces outils. Je devrais m'y intéresser apparemment...
 
Cela dit, ca évolue. Mes lignes de tableaux s'affichent, mais pas le contenu complet. J'ai par exemple: "nom : undefined" "prenom : undefined" etc
 
Bizarre non?

Reply

Marsh Posté le 31-08-2013 à 11:43:36    

Ok c'est un bon début
 
Alors mate justement cette fameuse console JS. Dans le code, tu as deux console.log, le premier affiche la variable 'data' et le second 'valeur'.
Il y a quoi dans le premier justement ?


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 31-08-2013 à 11:43:36   

Reply

Marsh Posté le 31-08-2013 à 11:54:51    

Par exemple, pour ton url
*EDIT*
ca me renvoit ca cette chaine :
{"1":[{"nom":"vetement t-shirt 1","prenom":"8","adr":"5425403610338"}]}
 
La clé étant "1", ca risque de poser soucis pour acceder aux données du coté JS (pas impossible, mais pas pratique).


Message édité par SICKofitALL le 31-08-2013 à 17:08:18

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 31-08-2013 à 12:00:15    

j'essaie de te suivre... :)
Que me conseilles tu de faire alors mnt?

Reply

Marsh Posté le 31-08-2013 à 12:04:15    

Donc, tu as quoi dans la console ?


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 31-08-2013 à 12:08:27    

je découvre un peu cette console.
Je suis sous FF. j'ai affiché la console. Que dois-je taper?
si je tape console.log, j'ai juste: function () {[native.code]}
J'imagine que je dois ajouter autre chose...

Message cité 1 fois
Reply

Marsh Posté le 31-08-2013 à 12:16:19    

Dans mon exemple, la chaine renvoyé par le PHP est :
{"1":[{"nom":"vetement t-shirt 1","prenom":"8","adr":"5425403610338"}]}
 
Le "1" provient de $json[$donnees['id_produit']][] , ou plutot $donnees['id_produit'] qui est égal à 1 pas vrai ?
 
On va mouliner ca :
on va "JSON-iser" la chaine {"1":[{"nom":"vetement t-shirt 1","prenom":"8","adr":"5425403610338"}]} via la commande qui va bien, à savoir

Code :
  1. var monJSON = JSON.parse ('{"1":[{"nom":"vetement t-shirt 1","prenom":"8","adr":"5425403610338"}]}');


 
Si je fait un console.log de la variable monJSON, on obtient un truc comme ca (vu sous firefox)
http://hfr-rehost.net/self/fd7267a6f018f6878238663e3055cf03bd18f1dd.png
 
Pour contourner ce soucis (comme dit c plus pratique que problématique), tu peux remplacer dans ton code PHP :

Code :
  1. $json[] = array (
  2. 'id' => $donnees['id_produit'],
  3.   'nom' => utf8_encode ($donnees['libelle']),
  4.   'prenom' => utf8_encode ($donnees['prix_vente']),
  5.   'adr' => utf8_encode ($donnees['code_barre'])
  6.    );


 
Ainsi, ce n'est plus un object qui sera retourné, mais un tableau qui contient des objets.
Essayes :)


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 31-08-2013 à 12:17:44    

bingojm a écrit :

je découvre un peu cette console.
Je suis sous FF. j'ai affiché la console. Que dois-je taper?
si je tape console.log, j'ai juste: function () {[native.code]}
J'imagine que je dois ajouter autre chose...


 
Par exemple, console.log ("une chaine" ) t'affiches ... une chaine ^^
console.log (maVariable) t'affiche la valeur de celle-ci
 
En fait, c'est grosso-modo l'équivalent de var_dump ou de print_r en PHP, mais en temps réel.


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 31-08-2013 à 12:34:48    

$donnees['id_produit'] est bien égal à 1 dans l'exemple.
 
j'ai remplacé le code php, mais rien ne change :(
je comprends tes explications et je t'en remercie encore.
Mais j'aimerais aussi comprendre ton utilisation de console.log je n'y arrive pas. D'abord, je dois être sur ma page principe ou php? dans l'exemple, je dois taper: console.log("json" )? j'imagine que non vu que ca ne va pas...

Reply

Marsh Posté le 31-08-2013 à 12:44:29    

Sur ta page *EDIT*
Affiche les outils de dev de firefox (ctrl+shift+k).
 
Dans $.ajax, la proprieté "success" pointe sur la fonction (un callback pour être précis) qui sera executée si la requete ajax s'est déroulée correctement.
Dans celle-ci, j'ai mis un console.log (data) que as priori tu n'as pas repris (je ne le vois pas dans le code source de la page).
 
Ton soucis ne vient pas du coté PHP, tes données étant generé comme il faut, mais du coté JS.
Regardes donc dans la console ce qu'il y a dans data (tu devrais y trouver qqch comme
[Object { id="1", nom="vetement t-shirt 1", prenom="8", more...}] )


Message édité par SICKofitALL le 31-08-2013 à 17:07:54

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 31-08-2013 à 13:15:24    

ca y est, je comprends. j'ai installé Firebug. je découvre avec ton exemple. quand je sélectionne mon premier objet (id = 1), j'ai ceci:
[Object { id="1", nom="vetement t-shirt 1", more...}]
et j'ai bien tous les bons détails. Mais pour avoir ces infos, je n'ai rien tapé dans la console, j'ai juste sélectionné mon premier élément de la liste déroulante. Car si je tape: console.log("data" ) , j'ai juste "data" qui apparait en dessous...

Reply

Marsh Posté le 31-08-2013 à 13:19:16    

Oui tu obtiens "data" car tu lui demande d'afficher la chaine "data" ;)
console.log est une fonction, et tu lui passes les params que tu veux.
Si tu lui passes une chaine, il t'affiche une chaine.
Si tu lui passes une variable (data donc), tu obtiendras le contenu de celle-ci.
Qui dans ton cas, suite aux modifs dans la partie PHP, est un tableau.
tu pourrais meme taper directement (pas dans firebug, dans ton code) :
console.log (data[0].id);
console.log (data[0].nom);
etc...
 
Ca t'affichera le contenu de ce qui vient du coté serveur, du PHP donc :)


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 31-08-2013 à 13:25:01    

D'accord, je commence à comprendre l'intérêt! Merci!
 
mais alors, où ce situe le problème qui me donne toujours "nom : undefined" etc?
 
Si j'ai bien compris, on sait que la page php est bonne et que les infos arrivent bien sur la page principale, mais elles ne s'affichent pas comme on le voudrait avec "valeur.nom". C'est bien ça?
 
Vers quoi faut il alors se pencher pour trouver l'erreur?

Reply

Marsh Posté le 31-08-2013 à 13:44:49    

Tu vois dans mon code là où il y a écrit
console.log (data);
 
plus bas tu as  
 
console.log (valeur);
 
Tu as quoi (dans la console ;) ) ?
 
On a changé le PHP, on va changer le JS en conséquence.


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 31-08-2013 à 13:50:06    

ben j'en reviens avec ce même problème...
Si je tape dans la console (à coté des >>> ): console_log(data)
il me met: ReferenceError: data is not defined.
Idem pour valeur.
C'est là que ce trouve l'erreur ou c'est moi qui ne sait pas encore me servir de la console? :)

Message cité 1 fois
Reply

Marsh Posté le 31-08-2013 à 14:15:32    

bingojm a écrit :

ben j'en reviens avec ce même problème...
Si je tape dans la console (à coté des >>> ): console_log(data)
il me met: ReferenceError: data is not defined.
Idem pour valeur.
C'est là que ce trouve l'erreur ou c'est moi qui ne sait pas encore me servir de la console? :)


Le second ;)
En essayant d'afficher la variable data dans la console, tu es en dehors de la fonction (celle lié à "success" ), donc forcement ca n'existe pas.
 
Moi je te parle bien de ce que t'affiches le  
console.log (valeur);
 
que tu trouves dans ton code ( *EDIT*) à la ligne 46


Message édité par SICKofitALL le 31-08-2013 à 17:07:40

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 31-08-2013 à 14:17:00    

http://hfr-rehost.net/self/14b1593e48f3f0082ae773ea8c4b68b4c768eeef.png


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 31-08-2013 à 14:21:18    

Ok j'ai regardé de mon coté
 
remplace dans le success par ca pour voir :

Code :
  1. success: function (data)
  2.       {
  3.        $.each (data, function (index, valeur)
  4.         {
  5.          $gamme.append ('<tr><td>nom : ' + valeur.nom + '</td></tr>');
  6.          $gamme.append ('<tr><td>prenom ' + valeur.prenom + '</td></tr>');
  7.          $gamme.append ('<tr><td>prenom ' + valeur.adr + '</td></tr>');
  8.         });
  9.       }


 
C'est ma faute, j'ai écrit les params de la fonction $.each à l'envers (en premier, l'index courant dans la boucle, ensuite la valeur courante) :jap:
 
Tiens moi au jus :)


Message édité par SICKofitALL le 31-08-2013 à 14:21:34

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 31-08-2013 à 17:05:27    

Oui mais hey si tu te trompes en plus, on ne va jamais y arriver!! :)
 
MEEERRRRCCCIIII très très sincèrement pour ton aide si précieuse.
j'ai appris beaucoup de choses grâce à toi.
Tout fonctionne très bien... sur FF, sur IE ça déconne sur quelques lignes, mais à mon avis, il garde une partie en mémoire des tests précédents. Je parie que ca ira aussi. Du moins, j'espère.
 
Encore 1000 mercis pour ne pas m'avoir lâché et de m'avoir consacré de ton temps et tes connaissances!
 
Il me reste une chose que je voudrais comprendre avec la console :) Comment taper console.log (valeur); en restant dans la fonction...
 
PS: puis je également de demander d'éditer tes messages et supprimer le lien internet. Pas top pour le référencement de ce site. Merci...

Reply

Marsh Posté le 31-08-2013 à 17:16:00    

Liens virés :)
 
Pas de soucis pour le dépannage.
Pour le reste, si tu me le permets je pense que tu devrais creuser un peu plus le coté debug, le dev web (ou du moins client-serveur) étant un peu hard parfois et plein de concepts tordus :D
Jetes un oeil aussi pour tout ce qui concerne la portée des variables, leur scope, etc... (surtout en JS, où les pièges sont nombreux)
 
Pour l'utilisation de firebug, et de la console en particulier, tu peux mater des trucs comme ca : http://supersonique.net/programmat [...] e-firebug/
 
Attention au soucis de cache (ctrl+f5 pour le vider, même sous IE). Tu peux gerer ca en changeant à la volée des URLs (en rajoutant une valeur aléatoire dans l'url par exemple).
 
Pour le JS (que bcp prennent trop à la legere à mon avis, considerant qu'il s'agit d'une bete langage simpliste), tu peux jeter un oeil à l'exemple docs de chez mozilla : https://developer.mozilla.org/fr/docs/JavaScript?menu
 
Bref, bonne chance pour le reste :hello:


---------------
We deserve everything that's coming...
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed