Méthode jQueryload()


jQuery - Méthode AJAX Load()

Méthode jQuery Load()

Méthode jQuery Load() Est une méthode AJAX simple mais puissante. La méthode

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

Syntaxe :

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

Les paramètres d'URL requis spécifient l'URL que vous souhaitez charger .

Le paramètre facultatif data spécifie l'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 de la fonction à exécuter une fois la méthode load() terminée.

Voici le contenu de l'exemple de fichier ("demo_test.txt") :

<h2>jQuery AJAX est une fonctionnalité intéressante ! </h2>

<p id="p1">Voici un extrait du texte du paragraphe. </p>

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

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#div1").load("/try/ajax/demo_test.txt");
	});
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Vous pouvez également ajouter le jQuery sélecteur au paramètre URL.

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

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt #p1");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本</h2></div>
<button>获取外部文本</button>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Le paramètre de rappel facultatif spécifie lorsque la fonction de rappel load() est autorisée une fois la méthode terminée. La fonction de rappel peut définir différents paramètres :

responseTxt - Contient le contenu du résultat lorsque l'appel est réussi statusTXT - Contient le statut de l'appel xhr - Contient l'objet XMLHttpRequest

L'exemple suivant sera complété dans la méthode load(). Une boîte de dialogue s'affiche alors. Si la méthode load() a réussi, "Contenu externe chargé avec succès !" s'affiche, et si elle échoue, le message d'erreur s'affiche :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>
<button>获取外部内容</button>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne