IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Récupérer les données du JSON ?


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Développeur COBOL
    Inscrit en
    Février 2020
    Messages
    68
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Développeur COBOL
    Secteur : Conseil

    Informations forums :
    Inscription : Février 2020
    Messages : 68
    Par défaut Récupérer les données du JSON ?
    Bonjour,

    Je continue ma gestion de Livres.

    J'ai un script php qui crée le formulaire de création (partagé en 2 fieldsets):
    . Le 1er fieldset comprend 3 champs:
    Titre du livre (champ obligatoire), Année édition
    et le N° du livre (en auto-increment en readonly)
    et un bouton Validation.

    . Le second fieldset (saisie des données chapitres) + bt validation

    et comprend l'appel (en Ajax /retour JSON) à un script 'verifliv' qui vérifie si le liv existe déjà en BDD sinon il le crée.


    Pour cela, j'ai d'abord un datalist sur le champ Titre (qui liste les titres existant en BDD).
    Si le titre est présent dans la liste, je le sélectionne et après validation, je souhaite donc récupérer et afficher les données supplémentaires correspondantes dans les champs (Num et Année)
    sinon je saisi le nouveau titre + (éventuellement l'année) puis après validation le créer en BDD.

    Déjà dans le cas où le liv existe, je récupère bien les données complètes (retour JSON) mais mon pb (et j'y viens ;-)) :

    1/, Je n'arrive pas à récupérer chaque élément ou valeurs du JSON afin de les afficher dans les champs correspondants

    D'après ce que j'ai compris, le JSON est pourtant un objet et donc j'ai fait (différents essais):
    data.Num ou data['Num'] (pour récupérer la valeur de 'Num' )
    mais à chaque fois, il m'affiche: undefined valeur

    OU doit on forcément utiliser le $.each(.....clé/valeur)....; j'ai essayé mais sans succès(surement mal codé ???)
    (mais n'y t'il pas un moyen plus simple pour récupérer uniquement "3 malheureuses données..." :-)) )

    2/ j'ai utilisé .val (pour tenter d'afficher les données ds les champs mais faut-il pas mieux utiliser .text ??)

    3/ J'ai remarqué ds le JSON que les données étaient en double ???

    4/ les commandes sur les fieldsets restent sans effet.... cad qu'une fois la validation faite sur le 1er ,
    je souhaiterais le désactiver pour rendre actif le second.

    En fait, dès que je valide, les champs se vident (réinitialisent ) et le fieldset reste actif et that's all!! :-((

    Je vous ai joint:
    -le script php (appel AJAX + formulaire)
    -le script verifliv
    -copie du JSON

    Merci bcp pour vos remarques !

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    <!--  ***************  INSERTION des PARTIES (HEADER, MENU, FOOTER,...) ***** -->
     
            <?php include("menuPILO.php"); ?>   
     
    <!--  ******************************************************** -->
     
     
    <!DOCTYPE html>
    <HTML>
     <head>
      <title> Gestion PILOTAGE </title>
          <meta charset="utf-8"/>
          <link rel="stylesheet" href="ajout1.css"/>
          <script src="jquery-3.4.1.js"></script>
     
             <script type="text/javascript">
     
    /////     -------------------------------------------------------
    /////             APPEL FONCTION VERIFLIV 
    /////     -------------------------------------------------------
            
             $(document).ready(function(){
     
                $("#Valid1").click(function(e){
                   e.preventDefault();
         
     
                   $.ajax({
                          type: 'POST',
                          url:  'verifliv.php',
                          data:{
                                num      : $("#num").val(),
                                titre    : $("#titreliv").val(),
                                annee    : $("#annee").val()
                                },
                                datatype: 'json',   
     
                                success:function(data){
                                            
                                console.log("retour SUCCES fonction verifliv data :"+data);
     
                                   
                         //     numLIV = data['Num'];
                         //     numTIT = data['Titre'];
                         //     annee  = data['Annee'];
                                          
     
                         //    console.log("numLIV :"+numLIV);
     
     
                         ///   Affectation nouvelles valeurs (issues du JSON) aux 3 champs formulaire
     
     
                          //     $("#num").val(numLIV);
                         //     $("#titreliv").val(numTIT);
                         //     $("#annee").val(annee);
     
                                                                       
     
                          /// BLOCAGE des CHAMPS du Fieldset LIV
     
                         document.getElementById("field1").style.disabled=true;  
     
     
                          /// ACTIVATION  des CHAMPS du Fieldset  CHAPITRE
     
                         document.getElementById("field2").style.disabled=false;  
     
                     
              
                          },
     
                       error:function(data)
                             { 
                              console.log("ERROR");
                             } 
                      
                   });
     
                });
          
             
     
     
     ////////  ----------------------------------------------
     ////////     APPEL FONCTION  CREATION CHAPITRE  (A VENIR)
     ////////   ----------------------------------------------
     
     
     
     
              </script>
     
     
          <style>
             #msgfoot {
             visibility:hidden;  
             text-align: center; 
             left:100px;
             width: 400px;
             height: 25px;
             position:absolute;
             top: 0px; 
             background :green;
                 }
          </style>      
     
     
     
     
     
     
     </head>
     
    <!-- =========================================================  -->
    <!-- =          APPEL  PHP                                        --> 
    <!-- ===========================================================  -->
     
     
    <body>
     
        <form class="formulaire" method="post" >
              <div>
                <fieldset id="field1">
                   <legend>Livre</legend>
                     <label for="titreliv">.Titre du Livre :</label>
                     <input list="ttliv" type="text" id="titreliv" name="Titreliv" size="25" >
     
     
    		  <datalist id="ttliv">
     
     
     <?php
                  try
                  {
                  // On se connecte ? MySQL
                    $bdd = new PDO('mysql:host=localhost;dbname=base2;charset=utf8','root','',array
                  (PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION)); 
                  }
     
                 catch(Exception $e)
                  {
                   // En cas d'erreur on affiche un msg et on arr?te tout
                   die('Erreur : '.$e->getmessage());
     
                   }
     
          
                  $reponse = $bdd->query('SELECT Titre FROM LIV ORDER BY Num');
     
                  while ($donnees = $reponse->fetch())
                  {
                  ?>
                     <option value="<?php echo $donnees['Titre']; ?>"><?php echo $donnees['Titre']; ?>
                     </option>
     
                  <?php
                  }
                   $reponse->closeCursor();
                  ?>             
     
     
                  </datalist>
     
     
     
     
     
                     <label for="num" style="padding-left:40px";>.Num : </label><input type="number" id="num" name="Num" size="3" readonly="readonly" >
                     <br/> 
                     <label for="annee">.Annee edition : </label>
                     <input type="number" id="annee" name="Annee" size="4" >
     
                    <button id="Valid1" type="submit" name="Valid1" value="OKValid1" style="padding : 10px"> VALIDER1 </button>
     
     
                     <br/></br>
                </fieldset>
              </div>
     
               <div>
                <fieldset id="field2" disabled >
                   <legend>Chapitres</legend>  
                     <label for="titrechap">.Chapitre : </label>
                     <input type="text" id="titrechap" name="Titrechap" size="50" required>
                     </br> </br>
     
                     <label for="avion" style="padding-right:6px";>.Avion(s) :</label>
                     <input type="text" id="avion" name="Avion" size="15" required>
                     <label for="cie" style="padding-left:30px";>.Cie : </label><input type="text" id="cie" name="Cie" size="20" >
                     </br>
     
                     <label for="date" style="padding-right:33px";>.Date : </label>
                     <input type="date" id="date" name="Date" size="8" >
                     <label for="pays" style="padding-left:30px";>.Pays      : </label><input type="text" id="pays" name="Pays" size="20" >
     
                     </br> </br>
     
                     <label for="comment">.Comment: </label>
                     <input type="text" id="comment" name="Comment" size="40" >
     
                     </br>
     
                    <button id="Valid2" type="submit" name="Valid2" value="OKValid2" style="padding : 10px"> VALIDER2</button>
                     </br> 
                </fieldset>
     
     
     
          </form>
     
        	    <div id="msgfoot" > ENREG CREE </div> 
     
     
     
    </body>
     
    </html>

    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    <?php
     
     
             //     echo " **** VERIFLIV.PHP VALID  ***** "; 
     
     
                    $titliv=$_POST['titre'];
     
    	//      echo "titre liv : $titliv "; 
     
     
          //  =========================================================
          //  =   VERIF SI LIV DEJA CREE 
          //  =========================================================
     
     
          $bdd = new PDO('mysql:host=localhost;dbname=base2;charset=utf8','root','',array
          (PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
     
           $reponse = $bdd->query("SELECT * FROM LIV where Titre = '$titliv' ");
     
           $resultat = $reponse->fetch();
     
     
            if ($resultat)   // Enr LIV existe deja
               {
     
                  //  echo "*** LIV existe DEJA (verifliv.php)"; 
                      echo json_encode($resultat);
     
    	   }
     
            else
                // ==============================================================
               ///                          CREATION ENR LIV 
               //   ==============================================================
               { 
     
     
                    $resultat= $bdd->exec('INSERT INTO LIV  (Titre, Annee) VALUES
                             ("'.$_POST['titre'].'", "'.$_POST['annee'].'" ');
     
     
                     if ($resultat)
                        {
     
                        //  echo "=== ENR LIV CREE ==== "; 
     
                        //  RECUPERATION du NumLiv pour retour JSON 
                        //      --------------------------------------------------
     
                           $reponse = $bdd->query("SELECT * FROM LIV where Titre = '$titliv' ");
     
                           $resultat = $reponse->fetch();
     
                           echo json_encode($resultat);
     
                        }
                      else
                        {  
                          echo "error";
                        }
     
     
               }
     
     
    ?>

    Nom : JSON.png
Affichages : 847
Taille : 249,7 Ko

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    au lieu de nous faire une dissertation de 15 pages, agrémentée de TOUT le code (avec mention : "débrouillez-vous avec ça") :

    • montre le code nécessaire et suffisant (avec, si possible, des commentaires dans le code)
    • donne les explications au fur et à mesure (en faisant éventuellement référence à la ligne du code correspondante)


    BREF : là, c'est trop long...
    Je n'ai pas eu envie de tout lire... ni de me taper tout le code à déchiffrer...

  3. #3
    Membre Expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 494
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 494
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  4. #4
    Membre confirmé
    Homme Profil pro
    Développeur COBOL
    Inscrit en
    Février 2020
    Messages
    68
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Développeur COBOL
    Secteur : Conseil

    Informations forums :
    Inscription : Février 2020
    Messages : 68
    Par défaut
    Citation Envoyé par jreaux62
    ...
    Décidément, quand je mets des extraits tu me dis que je dois mettre tout le code et détailler les explications (ce que je crois que j'ai fait) et là tu trouves que c'est trop long alors que c'est juste un pb pour récupérer des éléments du JSON (. Je ne sais vraiment plus quoi faire !!! Bref, ça ne va jamais!!
    Bref, ce n'est pas grave , des forums il y en a d'autres !!!
    Bien le bonsoir.

  5. #5
    Invité
    Invité(e)
    Par défaut
    Pour faire simple :

    • 1 discussion = 1 question

    Là, on est noyé. (d'ailleurs, je ne sais même pas quelle est la question ! )

    Mets-toi un peu à notre place, et RELIS ton 1er message.


    N.B. On répond bénévolement : s'il faut 3 plombes pour comprendre la problématique, on passe notre tour.

  6. #6
    Membre confirmé
    Homme Profil pro
    Développeur COBOL
    Inscrit en
    Février 2020
    Messages
    68
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Développeur COBOL
    Secteur : Conseil

    Informations forums :
    Inscription : Février 2020
    Messages : 68
    Par défaut
    Comme le code n'était vraiment pas long, je me suis permis de tout mettre mais au départ, effectivement , c'est bien un pb de non récupération des éléments du JSON ..(J'ai juste rajouter mon pb de fieldset actif/désactivef)

    Donc, il faut que je crée 3 postes:

    L'un pour mon pb (récup JSON)
    L'autre pour le JSON en double
    Le 3eme pour les fieldset ????

  7. #7
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Salut,
    Citation Envoyé par Phpx1 Voir le message

    1/, Je n'arrive pas à récupérer chaque élément ou valeurs du JSON afin de les afficher dans les champs correspondants

    D'après ce que j'ai compris, le JSON est pourtant un objet et donc j'ai fait (différents essais):
    data.Num ou data['Num'] (pour récupérer la valeur de 'Num' )
    mais à chaque fois, il m'affiche: undefined valeur

    OU doit on forcément utiliser le $.each(.....clé/valeur)....; j'ai essayé mais sans succès(surement mal codé ???)
    (mais n'y t'il pas un moyen plus simple pour récupérer uniquement "3 malheureuses données..." :-)) )
    Je pense plutôt que data est une chaine de caractère, si tu veux en faire un objet JS il faudrait parser cette chaine...

    Pour faire cela en JS pur il y a JSON.parse() mais apparemment il y a aussi une fonction en jQuery : $.parseJSON...

    Une fois parsée (data = JSON.parse(data)) tu pourras faire data.Num ou data['Num']...

  8. #8
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 513
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 513
    Par défaut
    Salut,

    Euuh.. à mon avis c'est dataType:"json" avec "T" majuscule et pas datatype.

    Et comme ça tu n'as pas besoin de convertir le résultat en json, parce qu'il est déjà un objet json.

  9. #9
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Salut,

    Ah oui il semblerait qu'en renseignant correctement le dataType* la conversion se fait automatiquement ce qui est plus simple en effet...

    Perso je n'utilise pas JQuery...

    * "json": Evaluates the response as JSON and returns a JavaScript object.
    https://api.jquery.com/C.ajax

  10. #10
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par Toufik83 Voir le message
    ...c'est dataType:"json" avec "T" majuscule et pas datatype.
    @Toufik83
    Très bien vu ! (il fallait le trouver !)

    1- Ensuite, on récupère bien les données avec :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
                                dataType: 'json',   
                                success:function(data){
     
                              var numLIV = data.Num;
                              var numTIT = data.Titre;
                              var annee  = data.Annee;



    2- Du coup, je réponds à la 2ème question :
    ...3/ J'ai remarqué ds le JSON que les données étaient en double ???...
    Dans verifliv.php
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
        $resultat = $reponse->fetch();

    Voir : PDO - fetch()
    fetch_style

    Contrôle comment la prochaine ligne sera retournée à l'appelant.
    Cette valeur doit être une des constantes PDO::FETCH_*, et par défaut, vaut la valeur de PDO::ATTR_DEFAULT_FETCH_MODE (qui vaut par défaut la valeur de la constante PDO::FETCH_BOTH).

    PDO::FETCH_ASSOC: retourne un tableau indexé par le nom de la colonne comme retourné dans le jeu de résultats

    PDO::FETCH_BOTH (défaut): retourne un tableau indexé par les noms de colonnes et aussi par les numéros de colonnes, commençant à l'index 0, comme retournés dans le jeu de résultats

    ...
    En l'occurrence, ce n'est pas trop gênant (on ne récupère pas beaucoup de données).
    Sinon, on peut préciser :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
        $resultat = $reponse->fetch(PDO::FETCH_ASSOC);



    3- Quant à la 3ème question, relative aux <fieldset> :
    Je pense qu'il faut purement et simplement ajouter ou supprimer l'attribut.
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
                         document.getElementById("field1").setAttribute('disabled', 'disabled');
     
                          /// ACTIVATION  des CHAMPS du Fieldset  CHAPITRE
     
                         document.getElementById("field2").removeAttribute('disabled');
    Dernière modification par Invité ; 13/05/2020 à 06h56.

  11. #11
    Membre confirmé
    Homme Profil pro
    Développeur COBOL
    Inscrit en
    Février 2020
    Messages
    68
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Développeur COBOL
    Secteur : Conseil

    Informations forums :
    Inscription : Février 2020
    Messages : 68
    Par défaut
    Bonjour,

    Merci de vos réponses.
    Effectivement, concernant le DataType...(fallait vraiment la trouver celle-ci !!!!)
    (Décidément, les majuscules en plein milieu de l'instruction, je m'y ferais jamais....;-))

    Je n'ai pas la config actuellement mais je pense continuer les tests à la fin de la semaine.
    Bonne journée.

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Bonjour,

    Citation Envoyé par Phpx1
    Effectivement, concernant le DataType...
    il serait peut être temps que tu lises la documentation officielle qui regorge d'exemples .

    Concernant la notation des variables jQuery, comme bien d'autres, utilise la « Naming Conventions » camelCase pour les variables.

    A lire JavaScript Style Guide(), mais il doit y en avoir d'autres dans le même style.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Windows Phone 8] Récupérer les données depuis un webservice Json toutes les 30 secondes
    Par arrakis42 dans le forum Windows Phone
    Réponses: 7
    Dernier message: 25/08/2013, 10h47
  2. Récupérer les données en JSON
    Par Rony Rauzduel dans le forum jQuery
    Réponses: 8
    Dernier message: 21/06/2013, 16h55
  3. Réponses: 1
    Dernier message: 17/05/2013, 13h34
  4. Récupérer les données avec json
    Par Rony Rauzduel dans le forum jQuery
    Réponses: 14
    Dernier message: 08/11/2012, 15h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo