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)

search |

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

Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

envoyer des mails en php

Envoyer des mails

margin-left

Définit la marge gauche d'un élément

fonction strncmp, strncmp

Comparaison binaire des n premiers caractères



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci