Jusque là j’ai principalement utilisé jQuery uniquement pour me rendre la tâche plus facile lors de la manipulation dynamique des différents éléments constituant une page XHTML donnée.
Ce soir j’ai trouvé enfin un peu de temps pour aller un peu plus loin pour enfin explorer le moyen de faire du Ajax en passant par ma librairie JavaScript fétiche :P. La tâche a été très simple grâce à la documentation en ligne qui n’est compréhensible pas totalement compréhensible pour les personnes débutant avec la librairie, enfin…
Le but de l’exercice est le suivant:
- Créer un formulaire avec quelques champs texte
- Envoyer le formulaire, pendant le traitement afficher une image/loader
- Déterminer comment passer les variables au fichier PHP pour leur traitement, ce dernier effectuant un traitement bidon qui va prendre quelque secondes lors de son exécution
- Afficher un feedback au terme de l’exécution du script PHP
Comme d’habitude, regardez l’exemple. Si vous regardez le code source, vous oberverez que nous n’allons pas mélanger le XHTML avec le JavaScript et que le formulaire pourra être traité même si le navigateur n’a pas activé le JavaScript.
Brève explication du script:
- Tous d’abord on va indiquer au système d’afficher une image animée lorsqu’un appel en ajax est en cours, le cacher une fois l’appel terminé;
- Ensuite, on démarre le traitement asynchrone du formulaire lorsqu’on appuye sur le bouton de submit;
- On récupère les valeures des deux formulaires qu’on ira par la suite envoyer au fichier php pour leur traitement
- On définit si faire un _POST ou un _GET ainsi que le fichier de traitement
- Pour finir, le feedback positif
$(document).ready(function(){
$("#ajax-loader").ajaxStart(function(){
$(this).show();
});
$("#ajax-loader").ajaxStop(function(){
$(this).hide();
});
$("form").submit(function(){
prenom = $("input[@name=prenom]").val();
nom = $("input[@name=nom]").val();
$.ajax({
type: "POST",
url: "jquery.php",
data: "prenom="+prenom+"&nom="+nom,
success: function(){
$("#feedback").html("Formulaire enregistré avec succès");
}
});
return false;
});
});
Le tour est joué en quelques lignes de code, sans prise de tête. Dans le prochain article, nous montrerons comment récupérer des informations du fichier de traitement pour les afficher sur le site.
Tags: ajax,
jquery,
tutorial
