jQuery AJAX la méthode getJSON()Charger données codées JSON à partir du serveur à l'aide d'une requête HTTP GET.

Définition et Usage la méthode getJSON()

jQuery cours tutorial

La méthode getJSON() est utilisée pour obtenir les données JSON à l'aide d'une requête AJAX HTTP GET.

Syntaxe

$(selector).getJSON(url,data,success (data,status,xhr))


Paramètre Description
URL Obligatoire. Spécifie l'url pour envoyer la demande à
data Facultatif. Spécifie les données à envoyer au serveur
succès (data, status, xhr) Facultatif. Spécifie la fonction pour exécuter si la demande réussit
Paramètres supplémentaires :
  • data - contient les données retournées par le serveur.
  • stats - contient une chaîne contenant le statut de la demande ("success", "notmodified", "error", "timeout", or "parsererror").
  • xhr - contient l'objet XMLHttpRequest

Note : À compter du jQuery 1.4, si le fichier JSON contient une erreur de syntaxe, la demande habituellement échoue silencieusement. Pour cette raison, éviter certaine  édition fréquente des données JSON.
 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.
Pour plus d'informations sur le format JSON, consultez JSON.

Exemple charge des photos plus à partir de l'API de Flickr JSONP.

Sélectionner le code

  <!DOCTYPE html>
  <html>
  <head>
    <style>img{ height: 100px; float: left; }</style>
    <script
  src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body><h2>Apprécie ces images :</h2>
    <div id="images">
  </div>
  <script>
  $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
    {
      tags: "oiseau",
      tagmode: "any",
      format: "json"
    },
    function(data) {
      $.each(data.items, function(i,item){
        $("<img/>").attr("src",
  item.media.m).appendTo("#images");
        if ( i == 11 ) return false;
      });
    });</script>
  </body>
  </html>

 

Exemple Obtenir des données JSON à l'aide d'une requête AJAX :

Le fichier demo_getJSON se trouve ici demo getJSON


Sélectionner le code

  <!DOCTYPE html>
  <html>
  <head>
  <script
  src="http://code.jquery.com/jquery-latest.js"></script>
  $(document).ready(function(){
    $("button").click(function(){
      $.getJSON("demo_getJSON.js",function(result){
        $.each(result, function(i, field){
          $("div").append(field + " ");
        });
      });
    });
  });
  </script>
  </head>
  <body>
  <button>Executer</button>
  <div></div>
  </body>
  </html>

 



Par gerywa 25 juillet 2014