Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1222 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Petit problème ajax avec JSON

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Petit problème ajax avec JSON

n°2201335
bingojm
Posté le 30-08-2013 à 19:17:48  profilanswer
 

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!

mood
Publicité
Posté le 30-08-2013 à 19:17:48  profilanswer
 

n°2201348
SICKofitAL​L
misanthrope
Posté le 30-08-2013 à 22:50:01  profilanswer
 

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...
n°2201359
bingojm
Posté le 31-08-2013 à 08:57:51  profilanswer
 

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...

n°2201360
bingojm
Posté le 31-08-2013 à 09:04:51  profilanswer
 

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... :(

n°2201362
bingojm
Posté le 31-08-2013 à 09:48:40  profilanswer
 

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...

n°2201363
SICKofitAL​L
misanthrope
Posté le 31-08-2013 à 09:58:31  profilanswer
 

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


---------------
We deserve everything that's coming...
n°2201365
bingojm
Posté le 31-08-2013 à 10:16:15  profilanswer
 

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
n°2201368
SICKofitAL​L
misanthrope
Posté le 31-08-2013 à 11:22:16  profilanswer
 

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...
n°2201370
bingojm
Posté le 31-08-2013 à 11:40:11  profilanswer
 

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?

n°2201371
SICKofitAL​L
misanthrope
Posté le 31-08-2013 à 11:43:36  profilanswer
 

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...
mood
Publicité
Posté le 31-08-2013 à 11:43:36  profilanswer
 

n°2201372
SICKofitAL​L
misanthrope
Posté le 31-08-2013 à 11:54:51  profilanswer
 

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...
n°2201373
bingojm
Posté le 31-08-2013 à 12:00:15  profilanswer
 

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

n°2201374
SICKofitAL​L
misanthrope
Posté le 31-08-2013 à 12:04:15  profilanswer
 

Donc, tu as quoi dans la console ?


---------------
We deserve everything that's coming...
n°2201375
bingojm
Posté le 31-08-2013 à 12:08:27  profilanswer
 

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
n°2201376
SICKofitAL​L
misanthrope
Posté le 31-08-2013 à 12:16:19  profilanswer
 

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...
n°2201377
SICKofitAL​L
misanthrope
Posté le 31-08-2013 à 12:17:44  profilanswer
 

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...
n°2201379
bingojm
Posté le 31-08-2013 à 12:34:48  profilanswer
 

$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...

n°2201383
SICKofitAL​L
misanthrope
Posté le 31-08-2013 à 12:44:29  profilanswer
 

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...
n°2201385
bingojm
Posté le 31-08-2013 à 13:15:24  profilanswer
 

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...

n°2201386
SICKofitAL​L
misanthrope
Posté le 31-08-2013 à 13:19:16  profilanswer
 

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...
n°2201387
bingojm
Posté le 31-08-2013 à 13:25:01  profilanswer
 

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?

n°2201388
SICKofitAL​L
misanthrope
Posté le 31-08-2013 à 13:44:49  profilanswer
 

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...
n°2201389
bingojm
Posté le 31-08-2013 à 13:50:06  profilanswer
 

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
n°2201390
SICKofitAL​L
misanthrope
Posté le 31-08-2013 à 14:15:32  profilanswer
 

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...
n°2201391
SICKofitAL​L
misanthrope
Posté le 31-08-2013 à 14:17:00  profilanswer
 

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


---------------
We deserve everything that's coming...
n°2201392
SICKofitAL​L
misanthrope
Posté le 31-08-2013 à 14:21:18  profilanswer
 

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...
n°2201401
bingojm
Posté le 31-08-2013 à 17:05:27  profilanswer
 

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...

n°2201402
SICKofitAL​L
misanthrope
Posté le 31-08-2013 à 17:16:00  profilanswer
 

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...
mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Petit problème ajax avec JSON

 

Sujets relatifs
[Qt Débutant] QTreeWidget, problème avec les fonctions de basesproblème avec une boucle foreach
Probleme Application JAVA Connexion DB MySQL (connector/J driver)directx 11 inclu dans win7 problème jeu
[Qt designer débutant] Problème de connexions des slotsProblème upload d'images
php problème tableau suite requête MySQL [résolu]Probleme import csv dans une base de donnée
probleme php raiderprobleme sur moteur de recherche sur page HTML
Plus de sujets relatifs à : Petit problème ajax avec JSON

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.078 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR