jQuery - Méthode load() AJAX

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

Méthode load() de jQuery

jQuery load()La méthode charge des données du serveur et place le HTML retourné dans l'élément sélectionné.

Cette méthode fournit une méthode simple pour charger des données asynchrones depuis le serveur Web.

C'estload()La syntaxe de la méthode :

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

Paramètres :

• URL-Spécifiez l'URL que vous souhaitez demander

• data -(Optionnel) Spécifiez un objet ou une chaîne pure à envoyer avec la requête au serveur

• callback-(Optionnel) Spécifiez la fonction de rappel à exécuter après la fin de la méthode load()

L'exemple suivant charge le contenu du fichier ajax_intro.txt dans l'élément DIV :

$("button").click(function(){
　　$("div").load("ajax_intro.txt");
});

L'exemple suivant charge la page ajax_post.html et envoie d'autresDonnées:

$("button").click(function(){
　　let　data　=　{fname:"Seagull",　lname:"Anna"};
　　$("div").load("ajax_post.php",　data);
});

Voici l'aspect d'un fichier PHP ("ajax_post.html") :

<?php
　　　　echo "<p>Hello ".$_POST['fname']."  ".$_POST['lname'].",　Comment ça va ?</p>";
?>

Méthode de requête :Si vous utilisezDonnéesSi l'objet est fourni, utilisez la méthode POST. Sinon, assumez GET.

Charger une page en utilisant une fonction de rappel

OptionnelcallbackParamètres spécifiésload()Fonction de rappel à exécuter après la fin de la méthode.

La fonction de rappel peut avoir des paramètres différents :

• response　 -Contient les données de résultat de la requête

• status -Contient l'état de la requête ("success", "notmodified", "error", "timeout", ou "parsererror")

• xhr-Contient l'objet XMLHttpRequest

L'exemple suivant charge la page ajax_post.html et envoie d'autres données et messages d'état :

$("button").click(function(){
　　let　data　=　{fname:"Seagull",　lname:"Anna"};
　　$("div").load("ajax_post.php",　data,　function(response,　status){
　　　　alert(status);
　　});
});

L'exemple suivant affiche une notification lorsque la requête Ajax rencontre une erreur :

$("button").click(function(){
　　let　data　=　{fname:"Seagull",　lname:"Anna"};
　　$("#success").load("wrong_file.php",　data,　function(response,　status,　xhr){
　　　　if(status == "error"){
　　　　　　let msg = "Désolé, mais il y a eu une erreur : ";
　　　　　　$("#error").html(msg　+　xhr.status　+　"　"　+　xhr.statusText);
　　　　}
　　});
});

Charger des fragments de page

jQuery load()La méthode permet également de ne récupérer qu'une partie du document.

Cela peut être réalisé simplement en ajoutant un espace et un sélecteur jQuery à la fin de l'URL.

Les exemples suivants chargeront le contenu de l'élément d'ID 'table' du fichier 'ajax_load.html' dans l'élément DIV :

$("button").click(function(){
　　$("div").load("ajax_load.html　#table");
});

Référence AJAX de jQuery

Pour des références complètes sur les méthodes AJAX, veuillez visiter notreRéférence AJAX de jQuery.