jQuery - Méthode AJAX Load()

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>

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

jQuery - Méthode AJAX Load()

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]