Voici un petit exemple de l’utilisation de Jquery et Ajax qui va nous permettre de charger le contenu d’une autre page sans recharger notre page.

Jquery ajax

Voici un petit exemple de l’utilisation de Jquery et Ajax qui va nous permettre de charger le contenu d’une autre  page sans recharger notre page.

L’évènement se fera sur un lien sur lequel nous allons affecter la class=ajax-lien
Le chargement se fera dans la div avec l’identifiant id=ajax

Tout d’abord dans la section head de votre page :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("a.ajax-lien").click(function() {

             $.ajax({
                   type:"POST",
                   url:$(this).attr("href"),
		   beforeSend: function()
                   {

                   },
                   success: function(retour){
                   //alert ('yes');
                   $("#ajax").empty().append(retour);

                   }
               });
               return false;

	});
});
</script>

Puis dans le body :

<!-- notre lien avec la class ajax-lien -->
<a href="notrepage.html" class="ajax-lien">Mon lien</a>
<!-- notre div ou va être chargé notrepage.html -->
<div id="ajax"></div>
Click to rate this post!
[Total: 2 Average: 4]

A propos jeanluc

Check Also

jQuery loader

Nous allons voir comment réaliser un plug-in loader (chargement) de page avec JavaScript et notamment …

One comment

  1. Jquery est un langage fabuleux pour les webmaster. Un nouvel exemple de sa puissance dans ce billet. Merci

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *