jQuery Academy · Leçon

Envoi de formulaires AJAX et retour utilisateur

Leçon 3 sur 311 étapes

Envoi de formulaires AJAX et retour utilisateur est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 3 leçons au total.

Des formulaires fluides avec AJAX

Imaginez envoyer un formulaire sans recharger toute la page ! C'est toute la magie de l'envoi de formulaires avec AJAX.

Au lieu d'actualiser entièrement la page, AJAX vous permet d'envoyer les données du formulaire à un serveur en arrière-plan. Vous obtenez ainsi une expérience utilisateur beaucoup plus fluide et rapide, idéale pour les commentaires, les inscriptions ou les mises à jour rapides.

Empêcher l'envoi par défaut

La première étape d'un envoi de formulaire avec AJAX consiste à empêcher le comportement par défaut du navigateur. Sinon, la page se rechargera normalement, ce qui annulerait l'intérêt d'AJAX !

Pour cela, nous appelons event.preventDefault() dans le gestionnaire d'envoi de notre formulaire.

<form id="myForm">
  <label for="username">Name:</label>
  <input type="text" id="username" name="username" placeholder="Your name">
  <button type="submit">Submit</button>
</form>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      event.preventDefault(); // Stop default form submission
      $('#status').text("Form submission prevented!");
      console.log("Form submission prevented!");
    });
  });
</script>

Préparer les données du formulaire

Avant d'envoyer les données d'un formulaire via AJAX, nous devons les préparer correctement. La méthode .serialize() de jQuery est idéale pour cela !

Elle récupère automatiquement les valeurs de tous les éléments input, select et textarea du formulaire.
Elle les encode sous forme de chaîne compatible avec les URL (par exemple, name=Alice&email=alice%40example.com).
Cette chaîne est le format standard utilisé pour envoyer les données d'un formulaire à un serveur.

<form id="dataForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" value="Bob">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" value="bob@example.com">
  <button type="submit">Get Data</button>
</form>
<div id="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#dataForm').submit(function(event) {
      event.preventDefault();
      let formData = $(this).serialize();
      $('#output').text("Serialized: " + formData);
      console.log(formData); // name=Bob&email=bob%40example.com
    });
  });
</script>

Envoyer la requête AJAX

Les données du formulaire étant sérialisées, nous pouvons maintenant les envoyer au serveur. jQuery propose plusieurs méthodes AJAX, mais $.post() est un raccourci pratique pour envoyer des données avec la méthode HTTP POST.

Cette méthode reçoit l'URL du serveur, les données sérialisées et une fonction de rappel facultative à exécuter en cas de réussite.

<form id="submitForm">
  <label for="msg">Message:</label>
  <input type="text" id="msg" name="message" value="Hello AJAX!">
  <button type="submit">Send</button>
</form>
<div id="response"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#submitForm').submit(function(event) {
      event.preventDefault();
      let formData = $(this).serialize();
      // Using a dummy API endpoint for demonstration
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#response').text("Success! Server ID: " + data.id);
        console.log("Server response:", data);
      });
    });
  });
</script>

Afficher un indicateur de chargement

Lorsqu'un utilisateur clique sur le bouton d'envoi, il s'attend à une réponse immédiate. Comme les requêtes AJAX sont asynchrones, un délai est inévitable. Il est donc essentiel de fournir un retour visuel !

Vous pouvez afficher le message « Chargement... » ou une animation pendant le traitement de la requête, puis le masquer à l'arrivée de la réponse.

<style>
  #loading { display: none; color: gray; }
</style>
<form id="feedbackForm">
  <label for="item">Item:</label>
  <input type="text" id="item" name="item" value="New Widget">
  <button type="submit">Add</button>
</form>
<div id="loading">Loading...</div>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#feedbackForm').submit(function(event) {
      event.preventDefault();
      $('#loading').show(); // Show loading indicator
      $('#status').text(''); // Clear previous status
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#loading').hide(); // Hide loading
        $('#status').text("Item added with ID: " + data.id);
      });
    });
  });
</script>

Gérer les réponses positives

Une fois que le serveur a traité les données du formulaire avec succès, il renvoie généralement une réponse. Il peut s'agir d'un message de confirmation, de l'ID d'un enregistrement nouvellement créé ou de données mises à jour.

La fonction de rappel de réussite (le troisième argument de $.post()) reçoit ces données, ce qui vous permet de mettre à jour votre interface en conséquence.

<form id="addTodoForm">
  <label for="todoTitle">Todo:</label>
  <input type="text" id="todoTitle" name="title" placeholder="New todo item">
  <button type="submit">Add Todo</button>
</form>
<ul id="todoList"></ul>
<div id="message"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#addTodoForm').submit(function(event) {
      event.preventDefault();
      $('#message').text('Adding...');
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/todos", formData, function(todo) {
        $('#message').text('Todo added!');
        $('#todoList').append('<li>' + todo.title + ' (ID: ' + todo.id + ')</li>');
        $('#addTodoForm')[0].reset(); // Clear form fields
      });
    });
  });
</script>

Gérer les erreurs avec élégance

Les requêtes ne réussissent pas toutes. Des problèmes réseau, des erreurs du serveur ou des données non valides peuvent entraîner l'échec d'une requête AJAX. Il est essentiel de gérer ces erreurs avec élégance et d'en informer l'utilisateur.

Avec $.post(), vous pouvez chaîner une méthode .fail(). Avec $.ajax(), vous pouvez utiliser la fonction de rappel error ou la méthode .fail() sur l'objet Deferred renvoyé.

<form id="errorForm">
  <label for="badData">Data:</label>
  <input type="text" id="badData" name="data" value="bad value">
  <button type="submit">Submit</button>
</form>
<div id="errorMessage" style="color: red;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#errorForm').submit(function(event) {
      event.preventDefault();
      $('#errorMessage').text('');
      let formData = $(this).serialize();
      // Simulating an error by posting to a non-existent endpoint
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/nonexistent-endpoint", // Will cause a 404 error
        type: "POST",
        data: formData
      })
      .done(function(data) {
        $('#errorMessage').text("Unexpected success!");
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $('#errorMessage').text("Error: " + textStatus + " - " + errorThrown);
        console.error("AJAX Error:", textStatus, errorThrown);
      });
    });
  });
</script>

Effacer les formulaires après l'envoi

Après l'envoi réussi d'un formulaire, il est préférable, pour une bonne expérience utilisateur, d'effacer les champs de saisie. Cela évite les renvois accidentels et prépare le formulaire pour l'action suivante.

Vous pouvez utiliser la méthode native du DOM .reset() sur l'élément de formulaire ou effacer manuellement les valeurs de chaque champ.

<form id="clearForm">
  <label for="item">Item:</label>
  <input type="text" id="item" name="item" value="Item A">
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" value="1">
  <button type="submit">Add</button>
</form>
<div id="feedbackMsg" style="color: green;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#clearForm').submit(function(event) {
      event.preventDefault();
      $('#feedbackMsg').text('Submitting...');
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#feedbackMsg').text('Successfully added! ID: ' + data.id);
        $('#clearForm')[0].reset(); // Clears all form fields
      });
    });
  });
</script>

Exemple complet de formulaire AJAX

Combinons toutes les techniques que nous avons apprises : empêcher l'envoi par défaut, sérialiser les données, envoyer la requête AJAX, afficher un indicateur de chargement, gérer les réponses positives et négatives, puis effacer le formulaire.

Cette approche complète garantit une expérience avec un formulaire AJAX robuste et facile à utiliser.

<style>
  #loader { display: none; color: blue; }
  #result { margin-top: 10px; font-weight: bold; }
</style>
<form id="fullAjaxForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Register</button>
</form>
<div id="loader">Processing...</div>
<div id="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#fullAjaxForm').submit(function(event) {
      event.preventDefault(); // Stop default form submission
      $('#loader').show();    // Show loading indicator
      $('#result').text('');  // Clear previous results
      let formData = $(this).serialize(); // Serialize form data
      
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/users", // Dummy API endpoint
        type: "POST",
        data: formData,
        dataType: "json" // Expect JSON response
      })
      .done(function(response) {
        $('#result').css('color', 'green').text('Registration successful! ID: ' + response.id);
        $('#fullAjaxForm')[0].reset(); // Clear form fields
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $('#result').css('color', 'red').text('Registration failed: ' + textStatus);
        console.error("AJAX Error:", textStatus, errorThrown);
      })
      .always(function() {
        $('#loader').hide(); // Always hide loading indicator
      });
    });
  });
</script>

Vérifiez votre compréhension

Vous avez appris à envoyer des formulaires avec AJAX tout en fournissant un retour en temps réel. Testons vos connaissances !

Réponds-y dans la leçon interactive

Récapitulatif : envois de formulaires fluides

Félicitations ! Vous maîtrisez désormais l'envoi de formulaires avec AJAX et pouvez améliorer vos applications web grâce à des expériences utilisateur fluides et non perturbatrices.

Vous avez appris à empêcher le comportement par défaut des formulaires avec event.preventDefault().
Vous avez utilisé .serialize() pour préparer facilement les données du formulaire à transmettre.
Vous avez mis en œuvre $.post() ou $.ajax() pour envoyer les données de manière asynchrone.
Vous avez ajouté un retour utilisateur essentiel en temps réel pour les états de chargement, de réussite et d'erreur.
Enfin, vous avez appris à effacer les formulaires après leur envoi afin de conserver une interface claire.

Ces compétences sont indispensables pour créer des formulaires web modernes et réactifs !

Gratuit pour commencer

Apprends JavaScript avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 22
Leçons: 48

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Envoi de formulaires AJAX et retour utilisateur » est-elle gratuite ?

Oui — le texte complet de « Envoi de formulaires AJAX et retour utilisateur » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Envoi de formulaires AJAX et retour utilisateur » ?

Maîtrisez l’envoi asynchrone des données de formulaire via AJAX, fournissez un retour en temps réel à l’utilisateur et gérez les réponses du serveur sans recharger entièrement la page, pour une expér… Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer jQuery Academy ?

Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 3.

Combien de temps prend la leçon « Envoi de formulaires AJAX et retour utilisateur » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?

Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Manipulation dynamique des champs de formulaire
Logique de validation des formulaires côté client
Envoi de formulaires AJAX et retour utilisateur

← Retour à jQuery Academy