La navigation AJAX avec jQuery

Avec la démocratisation de l’AJAX, beaucoup se demandent comment « ajaxiser leur site ». Outre le fait d’envoyer ses formulaires en AJAX, on sous-entend aussi le chargement des pages en AJAX, c’est ce que l’on va voir !

Voici mon code HTML très simple pour faire un menu avec une partie qui est consacrée au contenu à afficher :

<div id="menu">
	<ul id="nav">
		<li><a href="pages/?p=index">Index</a></li>
		<li><a href="pages/?p=cours">Cours</a></li>
		<li><a href="pages/?p=membres">Membres</a></li>
		<li><a href="pages/?p=contact">Contact</a></li>
	</ul>
</div>

<div id="contenu">
	<div>Contenu de la page "Index"</div>
</div>

Par défaut on arrive sur la page Index (accueil). Ici rien de bien compliqué, je mets volontairement des liens PHP pour montrer que cela fonctionne aussi avec un site dynamique.

Avant de vous balancer la réponse, voyons le schéma à suivre :

  1. Intercepter le clic sur un lien du menu
  2. Récupérer la valeur du href
  3. Faire une requête AJAX sur cette page
  4. Afficher la valeur renvoyée par le fichier PHP dans la div

Ceci est la logique « classique », cependant à l’utilisation, on remarquera qu’on ne souhaite pas forcément refaire une requête AJAX si c’est pour afficher le même contenu. Exemple : je suis sur la page des membres, si je reclique sur « Membres » il va me refaire une requête. Après c’est un choix personnel à faire, je vais moi, le prendre en considération dans mon code.
Pour faire ça, on peut utiliser une variable classique.

Mon schéma précédent devient donc :

  1. Intercepter le clic sur un lien du menu
  2. Récupérer la valeur du href
  3. Récupérer le nom de la page
  4. Comparer le nom de la page demandée et celle actuellement affichée
  5. Faire une requête AJAX sur la nouvelle page
  6. Afficher la valeur renvoyée par le fichier PHP dans la div

Maintenant place au code ! D’abord le PHP, pour changer.

<?php
if(isset($_GET['p']) && !empty($_GET['p'])) {
	$p = htmlentities($_GET['p']);
	
	switch($p) {
		case 'index': $contenu = 'Contenu de la page "Index"';
		break;
		case 'cours': $contenu = 'Contenu de la page "Cours"';
		break;
		case 'membres': $contenu = 'Contenu de la page "Membres"';
		break;
		case 'contact': $contenu = 'Contenu de la page "Contact"';
		break;
		default: $contenu = 'Page inconnue';
		break;
	}
	
	echo $contenu;
}
?>

Et le code jQuery commenté :

$(document).ready(function() {
	var $contenu_div = $('#contenu div');
	var page = $('#nav li a:first').text(); // par défaut c'est Index
	
	// au clic sur un lien du menu
	$('#nav li a').on('click', function() {
		var url = $(this).attr('href'); // on récupère le href
		
		// on récupère le nom de la page demandée
		var pageDemandee = $(this).text();

		// si on appelle une page qui n est pas celle affichée
		if(pageDemandee != page) { 
		
			// on met en mémoire la page
			page = pageDemandee;
			
			// chargement dans la div
			$.ajax({
				url: url,
				cache: false,
				success: function(html) {
					$contenu_div.hide().html(html).fadeIn();
				}
			});
		}
		return false;
	});
});

… Et c’est tout ! Avec un peu de mise en page, regardez la démo !

Vous aimerez aussi...