Créer des Formulaires Dynamiques avec AJAX

Formulaire de Base

Sur de nombreux sites web, il est courant de tomber sur un formulaire vous demandant de saisir votre adresse email. Pas plus loin que sur cette page, vous en avez un (Qui apparaît lorsque vous cliquez sur le bouton bleu) vous permettant de vous inscrire à ma newsletter. Tous les formulaires reposent sur un principe commun : L'envoi d'informations à une page, qui se charge ensuite de les enregistrer et de les traiter. Voici à quoi ressemble le formulaire évoqué au dessus :

 

<form action="newsletter.php" method="post">
    <input type="text" name="name" placeholder="Name (Bill)"/>
    <input type="email" name="email" placeholder="Email Address (bill@example.com)"/>
    <input type="submit" value="Send"/>
</form>

 

Ce formulaire comporte trois éléments :

• Un champ de type text, où vous pouvez indiquer votre nom.

• Un champ de type email, où vous pouvez indiquer votre adresse email.

• Un champ de type submit, vous permettant d'envoyer le formulaire.

Le coeur du formulaire est le troisième champ. Lorsque vous cliquez dessus, votre navigateur va vous rediriger vers une nouvelle page, en y envoyant les informations que vous avez saisi. La page en question, ainsi que la méthode d'envoi, sont indiquées dans les attributs de la balise du formulaire. Dans cet exemple, la page est newsletter.php, et la méthode est POST. Concernant les différentes méthodes d'envoi existantes, nous aurons l'occasion d'en reparler plus loin dans cet article.

En l'état, ce code est parfaitement fonctionnel. Mais il dispose d'un inconvénient majeur : Le changement de page, provoqué par l'envoi du formulaire. Pour une inscription à une newsletter, cela ne pose pas de véritable problème. Mais admettons que vous vouliez faire une messagerie en temps réel. L'envoi de chacun de vos messages provoquerait un rechargement complet de la page. Concernant la réception des nouveaux messages, le problème serait encore pire : Comme vous ne pouvez pas récupérer de données une fois la page chargée, il vous faudrait la forcer à s'actualiser toutes les secondes, (Et profiter de sa génération pour récupérer de potentiels nouveaux messages) ce qui poserait de sérieux problèmes d'ergonomie…

Vous l'aurez compris, il est impossible de créer une véritable messagerie instantanée en utilisant des formulaires classiques, à cause de ce changement de page imposé. Pour contourner cette limitation, JavaScript met à disposition une méthode nous permettant d'effectuer des requêtes en arrière plan, sans imposer un changement de page : L'AJAX. (Asynchronous JavaScript And Xml)

Le principe consiste à envoyer une requête asynchrone en arrière-plan, en lui précisant les données à envoyer. Comme toute requête, elle recevra une réponse qui, traitée en JavaScript, permettra de modifier la page principale, en fonction des données reçues. Comme pour l'utilisation de flexbox, il s'agit d'un concept simple à maîtriser, et qui vous offre de très nombreuses possibilités par la suite.

Ajouter AJAX sur un formulaire

Avant toute chose, il est important de préciser que le fonctionnement d'AJAX et des formulaires est assez proche. De ce fait, vous utiliserez souvent AJAX en complément d'un formulaire HTML classique. Nous allons ajouter un fichier JavaScript, dont le but sera de modifier notre formulaire, afin qu'il utilise AJAX. Et pour cela, nous allons utiliser jQuery.

Pourquoi jQuery ? Dans l'absolu, son utilisation n'est pas obligatoire pour utiliser AJAX. Cependant, il nous simplifiera l'envoi de nos requêtes, et nous permettra de traiter leurs réponses en quelques lignes. Si vous n'avez jamais utilisé jQuery, ne vous inquiétez pas ! Nous n'utiliserons que quelques fonctions simples, que je vous détaillerai lorsque nous en aurons besoin.

Pour commencer, il va falloir inclure jQuery dans notre fichier HTML. Pour cela, je vous recommande d'utiliser un CDN, afin d'avoir un simple lien à ajouter en haut de votre page.

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>  

Une fois cela fait, nous allons ajouter un nouveau script dans notre fichier. Le but de ce script sera, comme expliqué précédemment, de modifier notre formulaire, afin qu'il utilise AJAX. Pour y parvenir, nous allons utiliser la méthode submit de jQuery sur notre formulaire.

Pour rappel, jQuery permet de récupérer un élément d'une page grâce à la méthode $, (Oui, la méthode dollar) prenant en paramètre un sélecteur CSS. Je vous conseille donc d'ajouter un id au formulaire, afin de pouvoir le récupérer par ce biais.

Concernant la méthode submit, celle-ci prend en paramètre une fonction de callback. Les fonctions de callback sont indissociables du JavaScript, et permettent d'effectuer des actions en réponse à un évènement donné. Avec submit, la fonction de callback sera appelée lorsque le formulaire correspondant sera envoyé. Pour commencer, je vous propose d'afficher simplement un message à l'écran lors de l'envoi du formulaire.

 

<!DOCTYPE HTML>

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>
        <script>
            $("#messagingForm").submit(function() {
                alert("Hello World !");
            });
        </script>
    </head>
    <body>
        <form id="messagingForm" action="newsletter.php" method="post">
            <input type="text" name="username" placeholder="Username (Bill75)"/>
            <input type="text" name="message" placeholder="Message (Hello World !)"/>
            <input type="submit" value="Send"/>
        </form>
    </body>
</html>

 

Si vous testez ce code, vous devriez constater… Qu'il ne marche pas !

Lorsque vous cliquez sur le bouton d'envoi, le formulaire enclenche son fonctionnement par défaut, et vous redirige sur la page cible. La fonction de callback est bien exécutée, mais est invisible pour nous à cause de la redirection. Pour corriger cela, il faut annihiler ce comportement par défaut.

Avec jQuery, cela se passe en deux étapes. Premièrement, nous devons récupérer l'évènement du formulaire. Celui-ci est envoyé en paramètre de la fonction de callback, et il suffit de le récupérer comme n'importe quel paramètre. Ensuite, il faut appeler la méthode preventDefault de ce paramètre, ce qui va suspendre son execution.

 

$("#messagingForm").submit(function(event) {
    event.preventDefault();
});

 

Envoyer la Requête

Notre formulaire est désormais prêt ! Il ne nous reste plus qu'à implémenter la requête AJAX à l'intérieur de la fonction de callback. Avant d'aller plus loin, j'aimerai revenir sur les méthodes d'envoi, dont j'ai brièvement parlé au début de cet article. Lorsque vous devez transférer des données à une page, il y a principalement deux méthodes d'envoi possibles :

• GET : Les données envoyées transitent par l'URL. Les liens générés sont de la forme index.php?name=Anthony&message=Hello%20World%20!. Cette méthode sert surtout lorsque vous envoyez des données très courtes.

• POST : Les données transitent dans les en-têtes HTTP. Cela signifie qu'elles sont envoyées séparément, et donc que l'URL reste simple. Cette méthode permet d'envoyer des données plus longues.

Sauf cas spécifique, je vous recommande d'utiliser la méthode POST, qui ne présente que des avantages. Mais quel que soit la méthode que vous utiliserez, il n'y aura aucune différence dans son utilisation. En effet, jQuery met à disposition les méthodes get et post, dont l'utilisation est strictement identique. La seule différence étant la méthode d'envoi des données, à l'intérieur de la fonction.

Découvrons tout de suite comment utiliser ces méthodes. Elles prennent au minimum un paramètre, correspondant à la page qui doit être ouverte. Mais la plupart du temps, vous lui indiquerez un deuxième paramètre, correspondant aux données à envoyer. (Données qui seront transférées avec la méthode GET ou POST, selon la fonction utilisée) Dans notre cas, nous devons envoyer les données correspondant aux différents champs du formulaire.

 

$("#messagingForm").submit(function(event) {
    event.preventDefault();

    $.post("newsletter.php", {
        "name" : "Anthony",
        "message" : "Hello World !"
    });
});

 

Comme vous l'avez peut-être remarqué, nous envoyons toujours les mêmes valeurs pour name et message. (Respectivement "Anthony" et "Hello World !") Il serait plus intéressant de récupérer les valeurs entrées par l'utilisateur dans le formulaire.

Encore une fois, jQuery va nous simplifier la vie. Il nous suffit de récupérer un des champs du formulaire, et nous pourrons accéder à sa valeur (Entrée par l'utilisateur) avec la méthode val. Je vous invite donc à ajouter un id à chaque champ du formulaire, comme nous l'avons fait avec le formulaire en lui-même.

 

<!DOCTYPE HTML>

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>
        <script>
            $("#messagingForm").submit(function(event) {
                event.preventDefault();

                $.post("newsletter.php", {
                    "name" : $(".messagingUsername").val(),
                    "message" : $(".messagingMessage").val()
                });
            });
        </script>
    </head>
    <body>
        <form id="messagingForm">
            <input id="messagingUsername" type="text" name="username" placeholder="Username (Bill75)"/>
            <input id="messagingMessage" type="text" name="message" placeholder="Message (Hello World !)"/>
            <input type="submit" value="Send"/>
        </form>
    </body>
</html>

 

Vous noterez que j'ai supprimé les attributs action et method du formulaire, car ils ne serviront plus.

En essayant ce code, vous devriez remarquer que votre bouton semble ne pas réagir… Et pourtant, à chaque fois que vous cliquez dessus, votre navigateur ouvre la page newsletter.php en arrière-plan, y envoie les données que vous avez renseigné dans le formulaire, et referme la page sans même que vous ne remarquiez quoi que ce soit.

Félicitations, vous venez de faire votre première requête AJAX !

Chargement de la Réponse

Maintenant que vous savez envoyer des données en utilisant AJAX, vous êtes capable de créer une messagerie en temps réel ! Enfin, presque… Vous savez comment envoyer des données à une page, mais pas comment en récupérer. Pour cela, rien de bien compliqué, jQuery s'occupe de tout pour nous. En fait, la requête que nous avons créée intercepte déjà sa réponse. Tout ce qu'il nous reste à faire, c'est de réagir à cette réponse, en fonction de son contenu.

Pour cela, il suffit d'ajouter un troisième paramètre à la fonction get ou post, correspondant à une nouvelle fonction de callback. Cette fonction, qui s'exécutera lorsque la requête sera terminée, prend un paramètre un peu particulier, qui est la réponse à votre requête. La plupart du temps, cette réponse est au format HTML, mais il est possible que ce soit du JSON, du XML, ou tout autre format…

À titre d'exemple, nous pouvons afficher cette réponse, pour vérifier l'état de notre requête. Évidemment, la page appelée devra afficher si le message a correctement été enregistré ou non.

 

$("#messagingForm").submit(function(event) {
    event.preventDefault();

    $.post("newsletter.php", {
        "name" : $(".messagingUsername").val(),
        "message" : $(".messagingMessage").val()
    }, function(response) {
        alert(response);
    });
});

 

Précision : En fonction de la réponse que vous allez obtenir, vous allez effectuer différentes actions. Par exemple, si la réponse contient un nouveau message, vous allez l'ajouter à la liste de discussion, plutôt que de l'afficher comme ici.

Concrètement, nous pouvons distinguer deux cas de figure. Si la page appelée doit enregistrer des données, (Comme là) nous pouvons simplement afficher que le message a bien été enregistré. (Si c'est le cas, ou sinon afficher un message d'erreur) Dans le second cas, la page récupère des données, comme la liste des nouveaux messages, et vous devez alors les traiter afin de les intégrer au sein de votre page web. Il existe de nombreuses possibilités, en fonction du type de données reçues, et c'est pourquoi je ne peux pas vous présenter toutes les situations possibles.

Enfin, j'aimerai conclure sur un dernier point important : Nous avons vu dans cet article un exemple de script qui gère des requêtes en arrière plan, pour envoyer et recevoir des messages. Sur de nombreux sites, vous n'aurez pas un unique script comme celui-ci, mais plusieurs dizaines qui tournent en parallèles. Ce que je vous ai montré est un exemple simple. En pratique, nous aurions un premier script chargé d'envoyer les messages, et un second qui s'exécuterait toutes les secondes, et dont le but serait de récupérer les nouveaux messages. Il est préférable que chaque requête AJAX ai une unique mission, afin de garder un code clair et facilement compréhensible !

À partir de maintenant, je vous encourage à utiliser AJAX sur tous vos formulaires. Sa prise en main est à la fois simple et rapide, et n'apporte que des bénéfices aux visiteurs de votre site web. Son utilisation asynchrone est omniprésente en JavaScript, ce qui en fait un solide argument d'apprentissage pour tout développeur.

Écrit par Pythony le 15/12/2019.