Programmation

Ajax facile avec jQuery.

, , ,

Les sites en Ajax, permettent de modifier le contenu d’une page sans la recharger entièrement. jQuery permet de faire ce genre de requêtes Ajax très simplement.

Au sommaire :

  1. Le script le plus court pour faire une requête ajax avec jQuery.
  2. Le code jQuery pour AJAX avec Loader.
ajax jquery

1. Le script Ajax le plus court

Dans l’exemple qui suit, en cliquant sur le premier lien, un texte est chargé dans le “cadre” et en cliquant sur l’autre, une image est chargées.

Charger Fichier     Charger Image
 

Pour obtenir ce résultat, voici les étapes à suivre :

  • *Ajouter jQuery dans la page :
1
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  • Créer fonction jQuery faisant l’appel Ajax :
1
2
3
<script type="text/javascript">
	function getFileSimple(id,adr) {$.ajax({ "url":adr, "success":function (data){ $(id).html(data);} }); }
</script>

La même fonction étalée pour plus de lisibilité :

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
	function getFileSimple(id,adr) {
	$.ajax({ 
		"url":adr, 
		"success":function (data){ 
		$(id).html(data);
			} 
	}); }
</script>
  • *Créer une zone de chargement (balises <div>)
1
<div id="chargement"  style="width: 450px; height: 300px; border: 2px solid #C0C0C0;padding:15px;"></div>
  • enfin, créer un lien ou un bouton appelant la fonction ajax :

Lien pour charger un texte ou une image

1
<a href="javascript:getFileSimple('#chargement','/chemin/fichier.html');"> Charger Fichier</a>

N’oubliez pas de changer le lien vers le ficher html ou l’imge sur le serveur

On peut aussi remplacer le lien par un bouton :

1
<input onclick="getFileSimple('.chargement','https://chemin/fichier.html');" type="button" value="Charger Texte" />

2. Le code Ajax avec Loader.

Le problème pour l’utilisateur,lorsqu’il utilise les code ci-dessus, c’est qu’il a l’impression qu’il ne se passe rien puisque la page n’est pas rechargée.
Ce qui peut l’amener à penser que ça ne marche pas.
En ajoutant un “loder”, une image animée qui tourne en boucle, l’utilisateur comprend que des fichiers sont entrain d’être chargés et sera par la même plus patient.

  • Le script pour le gif animé de loader caché sera :
1
<img  src="https://lien/loader.gif" style="visibility: hidden;" class="loader" />

visibility: hidden permet de masquer le loader.

  • le script Ajax pour afficher puis cacher le loader

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <script type="text/javascript">

    	function getFileSimple(id,adr) {
    		$(".loader").css('visibility','visible');  // on rend le loader visible
    		$.ajax({
    			"url":adr,
    			"success":function (data){
    			$(".loader").css('visibility','hidden');  // on cache le loader
    			$(id).html(data);}
    	});
    	}
    </script>

  • Le code pour la zone d’affichage reste le même :

1
<div id="chargement"  style="width: 450px; height: 300px; border: 2px solid #C0C0C0;padding:15px;"></div>
  • Le lien reste le même :
1
<a href="javascript:getFileSimple('#chargement','/chemin/fichier.html');"> Charger Fichier</a>
  • Le résultat final :

Charger Image – Charger Texte

Vous avez maintenant toutes les cartes en main pour faire de l’ajax avec jQuery. Sachez néanmoins qu’il existe d’autres méthodes notamment avec d’autres frameworks MVC comme ReactJs, VueJs ou AngularJs.

A bientôt sur Outils Web.

Partager