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>