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

search |

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("http://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

Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

fonction vfprintf, vfprintf

crit une chaîne format e dans un flux

svg tracer des courbes

Les chemin pour déssiner en SVG  partie 2   tracer  des courbes 

fonction strncmp, strncmp

Comparaison binaire des n premiers caractères



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci