jQuery - Méthode AJAX load()


Méthode jQuery load()

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

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

Syntaxe:

$(selector).load(URL,data,callback);

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

Le paramètre de données facultatif spécifie un ensemble de paires clé/valeur de chaîne de requête à envoyer avec la requête.

Le paramètre de rappel facultatif est le nom d'une fonction à exécuter une fois la load()méthode terminée.

Voici le contenu de notre fichier d'exemple : "demo_test.txt":

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

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

Exemple

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

Il est également possible d'ajouter un sélecteur jQuery au paramètre URL.

L'exemple suivant charge le contenu de l'élément avec id="p1", à l'intérieur du fichier "demo_test.txt", dans un <div>élément spécifique :

Exemple

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

Le paramètre callback facultatif spécifie une fonction de rappel à exécuter lorsque la load()méthode est terminée. La fonction de rappel peut avoir différents paramètres :

  • responseTxt - contient le contenu résultant si l'appel réussit
  • statusTxt - contient le statut de l'appel
  • xhr - contient l'objet XMLHttpRequest

L'exemple suivant affiche une boîte d'alerte une fois la méthode load() terminée. Si la load()méthode a réussi, elle affiche "Contenu externe chargé avec succès !", et si elle échoue, elle affiche un message d'erreur :

Exemple

$("button").click(function(){
  $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
    if(statusTxt == "success")
      alert("External content loaded successfully!");
    if(statusTxt == "error")
      alert("Error: " + xhr.status + ": " + xhr.statusText);
  });
});

Référence jQuery AJAX

Pour un aperçu complet de toutes les méthodes jQuery AJAX, veuillez consulter notre Référence jQuery AJAX .