oujood.com

jQuery AJAX la méthode load() charge les données d'un serveur à l'aide d'une requête AJAX

jQuery, AJAX, méthode,load() est le moyen le plus simple pour récupérer les données depuis le serveur. C'est à peu près équivalent à $.get(url, data, success)

chercher |

Définition et Usage la méthode load()

jQuery cours tutorial

Laméthode load() charge les données d'un serveur à l'aide d'une requête AJAX et place les données retournées dans l'élément sélectionné.

Note : Il existe aussi une méthode d'événement appelé load() de jQuery mais elle est désapprouvée ou dépréciée dans la version 1.8 de jQuery.

Syntaxe

$(selector).load(url,données,function(réponse,statut,xhr))

 

Paramètre Description
URL Obligatoire. Une chaîne contenant l'URL à laquelle la demande est envoyée.
données Facultatif. Spécifie les données à envoyer au serveur avec la demande
function(réponse,Statut,xhr) Facultatif. Spécifie la fonction à exécuter lorsque la demande se termine

Paramètres supplémentaires :
  • réponse - contient les données de résultat de la demande
  • statut - contient l'état de la demande ("success", "notmodified", " error", "timeout", or " parsererror")
  • xhr - contient l'objet XMLHttpRequest

La méthode load()  à peu près équivalent à $.get(url, data, success) sauf que c'est une méthode plutôt qu'une fonction globale, et elle a une fonction de rappel implicite. Lorsqu'une intervention réussie est détectée (c.-à-d. quand textStatus est ("success", "notmodified"), la méthode .load() définit les données retournées comme contenu HTML de l'élément correspondant. Cela signifie que la plupart des utilisations de la méthode peuvent être très simples comme suit:

$('sélecteur').load('test.html');

Exemple Modifier le texte d'un élément div à l'aide d'une requête AJAX :

Code

  Copier le code

 <!DOCTYPE html> 
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery AJAX la méthode .load()</title>
<script src=" https://code.jquery.com/jquery-3.6.0.min.js "></script>
<!-- Script utilisant la méthode ajax -->
<script>
$(document).ready(function(){
 
  $("button").click(function(){
   
  $("div.result").load('test1.txt');
 
  });
});
</script>
</head> 
<body> 

	<h1 style="color:green">www.oujood.com</h1>
	
	<h2>jQuery la méthode ajax .load()</h2>
	<h3>Laiser ajax faire le travail</h3> 
<div>
<div class="result">Le texte à modifier </div>
<button>Executer</button>
</div>
</body>
  </html>

Exemple Faire une requête AJAX et envoyer des données.

Comment utiliser le paramètre de données pour envoyer des données avec la requête AJAX

Code

  Copier le code

 <!DOCTYPE html> 
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery AJAX la méthode .load()</title>
<script src=" https://code.jquery.com/jquery-3.6.0.min.js "></script>
<!-- Script utilisant la méthode ajax -->
<script>
$(document).ready(function(){
 
  $("input").keyup(function(){
   
  txt=$("input").val();
   
  $("span").load("//www.oujood.com/jquery/demo_ajax_post.php",{suggest:txt});
 
  });
});
</script>
</head> 
<body> 

	<h1 style="color:green">www.oujood.com</h1>
	
	<h2>jQuery la méthode ajax .load()</h2>
	<h3>Laiser ajax faire le travail</h3> 
<div>
<p>Commencer
  à saisir le nom d'un animal dans la zone de texte suivante:</p>
<label>Nom d'animal : </label><input type="text"/>
<p><u>Suggestions :</u><br><br>
  <span></span></p>
</div>
</body>
</html>

le fichier "demo_ajax_load.php" utilisé dans cet exemple se trouve ici: (demo_ajax_load)

Dans les exemples qui suivent nous aurons besoin du fichier suivant:

cliquer pour télécharger le fichier livres

Exemple Faire une requête  AJAX  et utiliser une fonction de rappel.

Comment utiliser le paramètre de fonction pour travailler avec le résultat de données de la requête AJAX.

Code

  Copier le code

 <!DOCTYPE html> 
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery AJAX la méthode .load()</title>
<script src=" https://code.jquery.com/jquery-3.6.0.min.js "></script>
<!-- Script utilisant la méthode ajax -->
<script>
$(document).ready(function(){ $("button").click(function(){ 
$(document).load("//www.oujood.com/jquery/livres.xml",function(response,status){
     if (status=="success")
     {
     $("div#result").html("<ol></ol>");    
  $(response).find("titre").each(function(){
       var txt1 = $(this).text();
 var txt2 = $(response).find("lien").text();
 var text = '<a href="'+txt2+'" target="_blank">'+txt1+'</a>'
       $('<li></li>').html(text).appendTo('ol');
       });
     $("#RT").text("Il y a "+$(response).find("titre").length+" livres.\n Cliquez  sur le nom du livre pour voir l'offre le concernant.") 
     } 
  });
  });
});
</script>
<style>
a{text-decoration:none}
</style>
</head> 
<body> 

	<h1 style="color:green">www.oujood.com</h1>	
	<h2>jQuery la méthode ajax .load()</h2>
	<h3>Laiser ajax faire le travail</h3>  
<div>
<h2>Des livres</h2>
<p id="RT"></p>
<div id="result"></div>
<button>Execute</button>
</div>
</body>
</html>

 

Exemple Faire une requête AJAX avec une erreur

Comment utiliser le paramètre de fonction pour traiter les erreurs dans une requête AJAX (en utilisant le paramètre XMLHttpRequest)..

Pour cela nous allons reprendre l’exemple ci-dessus et on va changer le script en faisant glisser une erreur dan le nom du fichier xml comme suit :

  Copier le code

<script>
$(document).ready(function(){$("button").click(function(){ 
$(document).load("//www.oujood.com/jquery/livre.xml",function(response,status,xhr){
     if (status=="success")
     {
     $("div#result").html("<ol></ol>");
    
  $(response).find("titre").each(function(){
       var txt1 =
  $(this).text();
var txt2 = $(response).find("lien").text();
var text = '<a href="'+txt2+'" target="_blank">'+txt1+'</a>'
       $('<li></li>').html(text).appendTo('ol');
       });
     $("#RT").html("Il y a "+$(response).find("titre").length+"livres.<br> Cliquez sur le nom du livre pour voir l'ofre le concernant.")
     }else
     {
     $("div#result").html("An error occured: <br/>" + xhr.status + " " + xhr.statusText)
     }
   });
 });
});
</script>
 
Par gerywa 25 juillet 2014



Voir aussi nos tutoriel :

fonction metaphone, metaphone

Calcule la clé metaphone

fonction strncmp, strncmp

Comparaison binaire des n premiers caractères

Comment on utilise XML

Comment on utilise XML