Méthode jQuery Load()
La méthode Load() charge les données du serveur et place les données renvoyées dans l'élément sélectionné.
Syntaxe :
$(sélector).load(URL,data,callback);
Le paramètre URL obligatoire spécifie 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 是个非常棒的功能！</h2>
<p id="p1">这是段落的一些文本。</p>
Chargez le contenu du fichier "demo_test.txt" dans le fichier <div> element :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</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>Vous pouvez également ajouter des sélecteurs jQuery aux paramètres d'URL.
L'exemple charge le contenu de l'élément avec id="p1" dans le fichier "demo_test.txt" dans l'élément <div> spécifié :
<!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>Le paramètre de rappel facultatif spécifie quand La fonction de rappel doit être autorisée une fois la méthode load() 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 l'état de l'appel
xhr - Contient le XMLHttpRequest object
L'exemple suivant affichera une boîte de dialogue une fois la méthode load() terminée. 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 :
<!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>
Exemple complet :
Créez d'abord un fichier text.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<div class="comment">
已有评论：
</div>
<div class="comment">
<h6>张三：</h6>
<p class="para">沙发。</p>
</div>
<div class="comment">
<h6>李四：</h6>
<p class="para">板凳。</p>
</div>
<div class="comment">
<h6>王五：</h6>
<p class="para">地板。</p>
</div>
</body>
</html>
Créez un autre Écrivez un fichier HTML (le nom peut être arbitraire) dans la méthode jQuery AJAX load() :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#send").click(function(){
$("#resText").load("text.html"); //引入text.html文件。
});
});
</script>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />
<div id="resText"></div>
</body>
</html>
section suivante