jQuery AJAX la méthode getJSON

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 charger des photos à partir de l'API de Flickr JSONP.

Dans cet exemple nous chargeons les photos des animaux, mais vous pouvez chager le mot animaux parexemple par(oiseau, lion, chat,.... ).

Code

Copier le code

<!DOCTYPE html> 
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery AJAX la méthode .getJSON()</title>
<script src=" https://code.jquery.com/jquery-3.6.0.min.js "></script>
<!-- Script utilisant la méthode ajax -->
<style>img{ width:300px; float: left; }</style>
</head> 
<body> 

	<h1 style="color:green">www.oujood.com</h1>
	
	<h2>jQuery la méthode ajax .getJSON()</h2>
	<h3>Laiser ajax faire le travail</h3>
 
<div>
<h2>Apprécie ces images :</h2>
  <div id="images">
</div>
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "animaux",
    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>
</div>
</body>
  </html>

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

Le fichier demo_getJSON se trouve ici demo getJSON

Code

Copier le code

<!DOCTYPE html> 
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery AJAX la méthode .getJSON()</title>
<script src=" https://code.jquery.com/jquery-3.6.0.min.js "></script>
<!-- Script utilisant la méthode ajax -->
</head> 
<body> 

	<h1 style="color:green">www.oujood.com</h1>
	
	<h2>jQuery la méthode ajax .getJSON()</h2>
	<h3>Laiser ajax faire le travail</h3>
<!--******************************************-->  
<div>
<h2>Apprécie ces images :</h2>
<button>Executer</button>
  <div id="result"></div>
<script>  $(document).ready(function(){
    $("button").click(function(){
      $.getJSON("https://www.oujood.com/jquery/demo_getJSON.js",function(result){
        $.each(result, function(i, field){
          $("div#result").append(field + " ");
        });
      });
    });
  });
  </script>
</div>
</body>
  </html>

jQuery Liste des méthodes AJAX

Par gerywa 25 juillet 2014

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

Référence jQuery ajax

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

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

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

La méthode secrète likes sans fin sur Facebook