XSLT transformation
jQuery, AJAX, méthode,load() est le moyen le plus simple pour récupérer les données depuis le serveur. C'est à peu près équivalent à $.get(url, data, success)
Laméthode load() charge les données d'un serveur à l'aide d'une requête AJAX et place les données retournées dans l'élément sélectionné.
Note : Il existe aussi une méthode d'événement appelé load() de jQuery mais elle est désapprouvée ou dépréciée dans la version 1.8 de jQuery.
Syntaxe
$(selector).load(url,données,function(réponse,statut,xhr))
Paramètre | Description |
---|---|
URL | Obligatoire. Une chaîne contenant l'URL à laquelle la demande est envoyée. |
données | Facultatif. Spécifie les données à envoyer au serveur avec la demande |
function(réponse,Statut,xhr) | Facultatif.
Spécifie la fonction à exécuter lorsque la demande se termine Paramètres supplémentaires :
|
La méthode load() à peu près équivalent à $.get(url, data, success) sauf que c'est une méthode plutôt qu'une fonction globale, et elle a une fonction de rappel implicite. Lorsqu'une intervention réussie est détectée (c.-à-d. quand textStatus est ("success", "notmodified"), la méthode .load() définit les données retournées comme contenu HTML de l'élément correspondant. Cela signifie que la plupart des utilisations de la méthode peuvent être très simples comme suit:
$('sélecteur').load('test.html');
Code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>jQuery AJAX la méthode .load()</title> <script src=" https://code.jquery.com/jquery-3.6.0.min.js "></script> <!-- Script utilisant la méthode ajax --> <script> $(document).ready(function(){ $("button").click(function(){ $("div.result").load('test1.txt'); }); }); </script> </head> <body> <h1 style="color:green">www.oujood.com</h1> <h2>jQuery la méthode ajax .load()</h2> <h3>Laiser ajax faire le travail</h3> <div> <div class="result">Le texte à modifier </div> <button>Executer</button> </div> </body> </html>
Comment utiliser le paramètre de données pour envoyer des données avec la requête AJAX
Code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>jQuery AJAX la méthode .load()</title> <script src=" https://code.jquery.com/jquery-3.6.0.min.js "></script> <!-- Script utilisant la méthode ajax --> <script> $(document).ready(function(){ $("input").keyup(function(){ txt=$("input").val(); $("span").load("//www.oujood.com/jquery/demo_ajax_post.php",{suggest:txt}); }); }); </script> </head> <body> <h1 style="color:green">www.oujood.com</h1> <h2>jQuery la méthode ajax .load()</h2> <h3>Laiser ajax faire le travail</h3> <div> <p>Commencer à saisir le nom d'un animal dans la zone de texte suivante:</p> <label>Nom d'animal : </label><input type="text"/> <p><u>Suggestions :</u><br><br> <span></span></p> </div> </body> </html>
le fichier "demo_ajax_load.php" utilisé dans cet exemple se trouve ici: (demo_ajax_load)
Dans les exemples qui suivent nous aurons besoin du fichier suivant:
cliquer pour télécharger le fichier livres
Comment utiliser le paramètre de fonction pour travailler avec le résultat de données de la requête AJAX.
Code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>jQuery AJAX la méthode .load()</title> <script src=" https://code.jquery.com/jquery-3.6.0.min.js "></script> <!-- Script utilisant la méthode ajax --> <script> $(document).ready(function(){ $("button").click(function(){ $(document).load("//www.oujood.com/jquery/livres.xml",function(response,status){ if (status=="success") { $("div#result").html("<ol></ol>"); $(response).find("titre").each(function(){ var txt1 = $(this).text(); var txt2 = $(response).find("lien").text(); var text = '<a href="'+txt2+'" target="_blank">'+txt1+'</a>' $('<li></li>').html(text).appendTo('ol'); }); $("#RT").text("Il y a "+$(response).find("titre").length+" livres.\n Cliquez sur le nom du livre pour voir l'offre le concernant.") } }); }); }); </script> <style> a{text-decoration:none} </style> </head> <body> <h1 style="color:green">www.oujood.com</h1> <h2>jQuery la méthode ajax .load()</h2> <h3>Laiser ajax faire le travail</h3> <div> <h2>Des livres</h2> <p id="RT"></p> <div id="result"></div> <button>Execute</button> </div> </body> </html>
Comment utiliser le paramètre de fonction pour traiter les erreurs dans une requête AJAX (en utilisant le paramètre XMLHttpRequest)..
Pour cela nous allons reprendre l’exemple ci-dessus et on va changer le script en faisant glisser une erreur dan le nom du fichier xml comme suit :
<script> $(document).ready(function(){$("button").click(function(){ $(document).load("//www.oujood.com/jquery/livre.xml",function(response,status,xhr){ if (status=="success") { $("div#result").html("<ol></ol>"); $(response).find("titre").each(function(){ var txt1 = $(this).text(); var txt2 = $(response).find("lien").text(); var text = '<a href="'+txt2+'" target="_blank">'+txt1+'</a>' $('<li></li>').html(text).appendTo('ol'); }); $("#RT").html("Il y a "+$(response).find("titre").length+"livres.<br> Cliquez sur le nom du livre pour voir l'ofre le concernant.") }else { $("div#result").html("An error occured: <br/>" + xhr.status + " " + xhr.statusText) } }); }); }); </script>