Manipulation de fichiers écriture
La méthode getJSON() est utilisée pour obtenir les données JSON à l'aide d'une requête AJAX HTTP GET
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 :
|
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.
Dans cet exemple nous chargeons les photos des animaux, mais vous pouvez chager le mot animaux parexemple par(oiseau, lion, chat,.... ).
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>
Le fichier demo_getJSON se trouve ici demo getJSON
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>