Soumission de Formulaire avec AJAX en utilisant jQuery

Objectif : Apprendre à soumettre un formulaire via AJAX avec jQuery, en traitant les réponses du serveur et en gérant les états de succès, d'erreur et de complétion de la requête.

04 Janvier 2024 · 10 minutes de lecture

AJAX, qui signifie Asynchronous JavaScript and XML, est une technique de développement web essentielle permettant d'envoyer et de recevoir des données du serveur de manière asynchrone, sans avoir à recharger la page entière. Cette approche est particulièrement utile dans la soumission de formulaires, car elle améliore considérablement l'expérience utilisateur.

            
                <form id="monFormulaire">
                    <input type="text" id="nom" name="nom" placeholder="Votre nom">
                    <input type="email" id="email" name="email" placeholder="Votre email">
                    <textarea id="message" name="message" placeholder="Votre message"></textarea>
                    <button type="submit">Envoyer</button>
                </form>
            
        

Le squelette typique d'une requête Ajax se présente comme suit :

            
                $("#monFormulaire").submit(function(e) {
                    $('#btnSubmit').prop('disabled', true); // Désactivation du bouton
                    e.preventDefault();

                    // Convertir les données du formulaire en objet JavaScript
                    var dataObj = {};
                    $.each($(this).serializeArray(), function(i, field) {
                        dataObj[field.name] = field.value;
                    });

                    // Convertir l'objet JavaScript en chaîne JSON
                    var jsonData = JSON.stringify(dataObj);
                
                    $.ajax({
                        url: 'chemin/vers/le/serveur',       // A Remplacer par l'URL du serveur
                        type: 'POST',                   // GET, POST, PATCH, DELETE...
                        contentType: 'application/json',     // Définit le type de contenu de la requête comme JSON
                        dataType: 'json',                // Définit le type de données attendues en réponse comme JSON
                        processData: false,              // Empêche la conversion automatique des données
                        data: jsonData,                // Les données à envoyer

                        // La fonction de rappel success est appelée pour les réponses HTTP avec des codes de statut
                        // dans la plage 200-299, qui indiquent des réponses réussies.
                        success: function(response) {
                            if(response.status == 200) {
                                showToastMessage(response.message, "text-success");
                            }
                            else {
                                showToastMessage(response.message, "text-danger");
                            }
                            $('#formulaire')[0].reset(); // Le cas d'un formulaire, par exemple
                        },

                        // La fonction de rappel error est appelée pour les réponses avec des codes de statut en dehors
                        // de cette plage, comme les erreurs client (4xx) et les erreurs serveur (5xx).
                        error: function(xhr, status, error) {
                            $('#formulaire')[0].reset();
                            
                            // Gestion des erreurs de validation, par exemple
                            if(xhr.status === 422) {
                                // Récupère l'objet d'erreurs de la réponse JSON
                                var errors = xhr.responseJSON.errors;

                                // Vérifie si 'errors' est un objet (erreurs de validation) ou une chaîne de caractères (message d'erreur simple)
                                if (typeof errors === 'object' && errors !== null) {
                                    // Si 'errors' est un objet, itère sur ses propriétés
                                    for (var key in errors) {
                                        if (errors.hasOwnProperty(key)) {
                                            // Affiche chaque message d'erreur
                                            showToastMessage(errors[key], "text-danger");
                                        }
                                    }
                                } else if (typeof errors === 'string') {
                                    // Si 'errors' est une chaîne de caractères, affiche directement le message
                                    showToastMessage(errors, "text-danger");
                                }
                            }else {
                                // Je gère les erreurs en mode développement uniquement.
                                console.error('Erreur lors de la mise à jour', xhr, status, error);
                                var errorMsg = 'Une erreur s\'est produite : ' + (xhr.responseJSON ? xhr.responseJSON.message : xhr.statusText);
                                alert(errorMsg);
                            }
                        },
                        complete: function(xhr, status) {
                            // Code à exécuter à la fin de la requête, que ce soit un succès ou une erreur
                        }
                    });
                });