jQuery ajax - load() method
Example
Use AJAX requests to change the text of the div element:
$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
Definition and Usage
The load() method loads data from the server via AJAX requests and places the returned data into the specified element.
Remarque :There is also a named load of jQuery eventmethod. Which one to call depends on the parameters.
syntax
load(url,data,function(response,status,xhr))
| parameters | description |
|---|---|
| url | Définit l'URL vers laquelle la requête doit être envoyée. |
| data | Optionnel. Définit les données à envoyer au serveur avec la requête. |
| function(response,status,xhr) |
Optionnel. Définit la fonction à exécuter lorsque la requête est terminée. Paramètres supplémentaires :
|
Explication détaillée
Cette méthode est la méthode la plus simple pour obtenir des données du serveur. Elle est presque équivalente à $.get(url, data, success), mais elle n'est pas une fonction globale et elle possède un rappel implicite. Lorsque le réponse réussie est détectée (par exemple, lorsque textStatus est "success" ou "notmodified"), .load() met le contenu HTML de l'élément correspondant en correspondance avec les données retournées. Cela signifie que la plupart des utilisations de cette méthode seront très simples :
$("#result").load("ajax/test.html");
Si une fonction de rappel est fournie, cette fonction sera exécutée après le post-processing :
$("#result").load("ajax/test.html", function() {
alert("Load was performed.");
});
Dans les deux exemples ci-dessus, si le document courant ne contient pas l'ID "result", la méthode .load() ne sera pas exécutée.
Si les données fournies sont un objet, utilisez la méthode POST ; sinon, utilisez la méthode GET.
Chargement de fragments de page
La méthode .load(), contrairement à $.get(), nous permet de spécifier une partie du document distant à insérer. Cela est réalisé par un syntaxe spéciale du paramètre url. Si cette chaîne contient un ou plusieurs espaces, la chaîne immédiatement après le premier espace est le sélecteur jQuery déterminant le contenu à charger.
Nous pouvons modifier l'exemple ci-dessus pour utiliser une partie du document obtenu :
$("#result").load("ajax/test.html #container");
Si l'exécution de cette méthode est effectuée, le contenu de ajax/test.html sera récupéré, mais ensuite, jQuery analysera le document retourné pour trouver les éléments portant l'ID de conteneur. Cet élément, ainsi que son contenu, sera inséré dans l'élément portant l'ID de résultat, et le reste du document récupéré sera jeté.
jQuery utilise la propriété .innerHTML du navigateur pour analyser le document récupéré et leInsérer dans le document actuel. Pendant ce processus, le navigateur filtrera souvent des éléments du document, tels que les éléments <html>, <title> ou <head>. En conséquence, les éléments récupérés par .load() peuvent ne pas être identiques aux documents directement récupérés par le navigateur.
Remarque :En raison des limitations de sécurité du navigateur, la plupart des requêtes "Ajax" respectent la stratégie de source ; les requêtes ne peuvent pas récupérer des données avec succès à partir de domaines, sous-domaines ou protocoles différents.
Plus d'exemples
Exemple 1
Charger le contenu du fichier feeds.html :
$("#feeds").load("feeds.html");
Exemple 2
Similaire à l'exemple précédent, mais avec l'envoi de paramètres supplémentaires sous forme de POST et l'affichage d'un message en cas de succès :
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("Les 25 dernières entrées du flux ont été chargées");
});
Exemple 3
Charger la partie de navigation latérale de l'article dans une liste non ordonnée :
Code HTML :
<b>Liens jQuery:</b> <ul id="links"></ul>
Code jQuery :
$("#links").load("/Main_Page #p-Getting-Started li");
Plus d'exemples TIY
- Générer une requête AJAX et envoyer des données via cette requête
- Comment utiliser les paramètres data pour envoyer des données via une requête AJAX. (Explanté dans le tutoriel AJAX.)
- Générer une requête AJAX et utiliser une fonction de rappel
- Comment utiliser les paramètres de fonction pour traiter les résultats de données provenant des requêtes AJAX.
- Générer une requête AJAX avec des erreurs
- Comment utiliser les paramètres de fonction pour traiter les erreurs dans les requêtes AJAX (utilisation des paramètres XMLHttpRequest).
