La méthode $.getJSON()

La méthode $.getJSON()

  1. Objectifs

    • Etre capable d’afficher un contenu JSON dans une page web
  2. Présentation

    • JSON (JavaScript Object Notation) est un format d’échange de données léger. Il est facile pour les humains de lire et d’écrire. Il est facile pour les machines d’analyser et de générer.
    • JSON est un format d’échange de données avec des règles de syntaxe qui sont plus strictes que celles de notation littérale d’objet de JavaScript. Par exemple, toutes les chaînes représentées dans JSON, qu’ils soient des propriétés ou des valeurs, doivent être encadrées de guillemets.
    • {…} : les accolades définissent un objet.
    • “language”:”Java” : Les guillemets (double-quotes) et les double-points définissent un couple clé/valeur (on parle de membre).

    • […] : Les crochets définissent un tableau (ou array en anglais).
    • {“id”:1, “language”:”json”, “author”:”Douglas Crockford”} : Les virgules permettent de séparer les membres d’un tableau ou, comme ici, d’un objet . A noter : pas de virgule pour le dernier membre d’un objet, sinon, il ne sera pas valide et vous aurez des erreurs lors de l’analyse du fichier.



  3. Utilisation

    • jQuery fournit une méthode appelée ” getJSON ” pour charger des données codées JSON à partir du serveur à l’aide d’une requête HTTP GET.
    • Définition
      • La méthode getJSON() est utilisée pour obtenir des données JSON à l’aide d’une requête AJAX HTTP GET.
      • La méthode getJSON () dans jQuery récupère les données codées JSON du serveur à l’aide d’une requête HTTP GET.
    • Syntaxe
      • $(selector).getJSON(url,data,success(data,status,xhr))
    • Paramètre
      • jQuery fournit une méthode appelée ” getJSON ” pour charger des données codées JSON à partir du serveur à l’aide d’une requête HTTP GET.

      • Cette méthode accepte trois paramètres mentionnés ci-dessus et décrits ci-dessous:
      • Paramètre Description
        url Obligatoire. Spécifie l’URL à laquelle envoyer la demande
        data Optionnel. Spécifie les données à envoyer au serveur
        success(data,status,xhr) Optionnel. Spécifie la fonction à exécuter si la demande aboutit
        Paramètres supplémentaires:

        • data – contient les données renvoyées par le serveur.
        • status
          contient une chaîne contenant l’état de la demande (“success”, “notmodified”, “error”, “timeout”, or “parsererror”).
        • xhr – contient l’objet XMLHttpRequest
    • Exemple
      • Obtenez des données JSON à l’aide d’une requête AJAX et affichez le résultat:
      • $("button").click(function(){
          $.getJSON("demo_ajax_json.js", function(result){
            $.each(result, function(i, field){
              $("div").append(field + " ");
            });
          });
        });
  4. Activités

    • Activité JSON 01
      1. Énoncé
        • En supposant que nous ayons le contenu JSON suivant dans le fichier result.json
        • {
             "nom": "Mohamed Ali",
             "age" : "67",
             "genre": "Homme",
             "adresse": "13 Rue 14 Janvier 2010",
             "tel": 21697656888
          }
        • Créer le fichier HTML et le script pour afficher le contenu de ce fichier dans une page HTML
        • Cela devrait produire le résultat suivant :
        • La méthode $.getJSON()

      2. Solution
        • Essayez de faire l’activité de votre côté avant de regarder la Solution !
    • Activité JSON 02
      1. Énoncé
        • Télécharger le fichier JSON d’Ici
        • Utiliser la méthode Ajax Jquery getJSON pour présenter le contenu du fichier téléchargé en table HTML.
        • Le résultat de votre travail doit correspondre à l’image suivant :
        • La méthode $.getJSON()

      2. Solution
        • Essayez de faire l’activité de votre côté avant de regarder la Solution !



Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement