Méthode AJAX load() jQuery

Méthode load() jQuery

La méthode load() jQuery est une méthode AJAX simple mais puissante.

La méthode load() charge les données du serveur et les place dans l'élément sélectionné.

Grammaire :

$("}}).load(URL,data,callback);

Obligatoire URL Le paramètre spécifie l'URL que vous souhaitez charger.

Optionnel data Le paramètre spécifie un ensemble de paires clé/valeur de chaînes de caractères à envoyer avec la requête.

Optionnel callback Le paramètre est le nom de la fonction à exécuter après la fin de la méthode load().

Voici le contenu du fichier d'exemple ("demo_test.txt") :

<h2>jQuery et AJAX est FUN!!!</h2>
<p id="p1">Ceci est du texte dans un paragraphe.</p>

L'exemple suivant charge le contenu du fichier "demo_test.txt" dans l'élément <div> spécifié :

Exemple

$("#div1").load("demo_test.txt");

Essayez-le vous-même

Vous pouvez également ajouter un sélecteur jQuery aux paramètres de l'URL.

L'exemple suivant charge le contenu de l'élément avec l'id="p1" du fichier "demo_test.txt" dans l'élément <div> spécifié :

Exemple

$("#div1").load("demo_test.txt #p1");

Essayez-le vous-même

Le paramètre callback optionnel spécifie la fonction de rappel à exécuter après la fin de la méthode load(). La fonction de rappel peut définir différents paramètres :

  • responseTxt - Contient le contenu du résultat de l'appel réussi
  • statusTXT - Contient l'état de l'appel
  • xhr - Contient l'objet XMLHttpRequest

Le exemple suivant affiche une boîte de dialogue après la fin de l'exécution de la méthode load(). Si la méthode load() s'est exécutée avec succès, "Le contenu externe a été chargé avec succès !" est affiché, sinon, un message d'erreur est affiché :

Exemple

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("Le contenu externe a été chargé avec succès !");
    if(statusTxt=="error")
      alert("Erreur: "+xhr.status+": "+xhr.statusText);
  });
});

Essayez-le vous-même

Manuel de référence jQuery AJAX

Pour une référence complète des méthodes AJAX, veuillez visiter notre Manuel de référence jQuery AJAX.