Comment envoyer des données depuis un formulaire avec Ajax ?

Introduction

Cette page explique comment envoyer des données dynamiques en utilisant Ajax / JavaScript. Nous supposons que les données sont dans un formulaire HTML, quand l'utilisateur clique sur le bouton de soumission, les données sont envoyées en utilisant Ajax.

Formulaire HTML

Pour commencer, nous avons besoin d'un formulaire HTML. Si le lecteur n'est pas familier avec les formulaires HTML, je recommande de lire ce cours de développement web en ligne et gratuit. Notre formulaire a deux champs, un pour le prénom, un pour le nom :

<form id="form">
  Firstname
  <input type="text" id="firstname" name="firstname" value="John"><br><br>
  Lastname
  <input type="text" id="lastname" name="lastname" value="Smith"><br><br>
  <input type="submit" value="Submit">
</form>

Nous ajoutons également une division pour afficher la réponse du serveur après la requête Ajax :

Response:
<div id="output"></div>

Voici l'interface finale :

JavaScript

Pour récupérer les données postées par le formulaire, nous devons déclencher un événement lorsque le formulaire est soumis :

// Déclenche un événement quand le formulaire est soumis
const form = document.getElementById('form');
form.addEventListener('submit', (event) => {

    // Le code de cette section s'exécute quand le formulaire est soumis
    // ...

    // Empèche l'envoi du formulaire HTML par le navigateur (c-a-d le comportement par défaut)
    event.preventDefault();
});

Nous pouvons récupérer les données de chaque champ avec les lignes suivantes :

let firstname = document.getElementById('firstname').value;
let lastname = document.getElementById('lastname').value;

La réponse est copiée dans la division dédiée à la réponse du serveur. Préparons l'objet output :

const output = document.getElementById('output');

Pour les requêtes AJAX, nous utilisons le module JS Ajax Module présenté et expliqué sur cette page. Nous interrogeons l'API Rest à l'adresse https://url-example.com/api/json/post/. Cette API de démonstration répond les données postées en JSON.

ajax('https://url-example.com/api/json/post/')
.post({ "firstname": firstname, "lastname": lastname})
.then(function (response) { output.textContent = response })
.catch(function(failure) { alert ('Error') })

La première ligne ci-dessus appelle la méthode ajax()`` avec l'URL de l'API Rest. La deuxième ligne spécifie les paramètres et envoie la requête. Si la requête réussit, la fonction de rappel dans la clausethen()` sera appelée. Ici, les données reçues sont affichées dans la division prévue à cet effet. Si la requête a échoué, l'erreur sera capturée. Ici, une alert affiche un message d'erreur.

Voici le résultat final :

Voir aussi

Dernière mise à jour : 09/11/2022