oujood.com

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

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

chercher |

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

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>
Par gerywa 25 juillet 2014



Voir aussi nos tutoriel :

les boites de dialogue

Les boites de dialogue : Définition et utilisation des boites de dialogue.

font-variant

Spécifie si oui ou non un texte doit être affiché dans un small-caps police

Récupère la valeur d'une variable, au format chaîne">strval

 Récupère la valeur d'une variable, au format chaîne