Soumettre un formulaire HTML en AJAX avec Javascript

Cet article a été publié depuis plus de 6 mois, cela signifie que le contenu peut ne plus être d'actualité.

Nous travaillons aujourd’hui avec tellement de framework aussi bien pour concevoir les parties backend que frontend, que nous oublions parfois à quel point il peut être facile d’effectuer certaines actions pouvant paraître complexe sans utiliser aucun outil supplémentaire. C’est notamment le cas pour la soumission de formulaire en AJAX.

Posez la question autour de vous, qui sait comment soumettre un formulaire en AJAX sans utiliser un framework particulier côté client (tel que React ou encore VueJS ou même encore jQuery) et sans utiliser des composants qui sont parfois fournis avec des frameworks backend, vous pourriez être surpris des réponses.

Pourtant les navigateurs et le langage Javascript ont énormément évolué ces dernières années et soumettre un formulaire AJAX n’a plus rien de bien sorcier. A vous d’en juger avec le snippet ci-dessous:

<html>
  <body>
    <form method="post" action="/submit" enctype="multipart/form-data">
      <input type="text" name="filename">
      <input type="file" name="file">
      <input type="submit">
    </form>

    <script>
      document.addEventListener('DOMContentLoaded', function() {
        document.getElementsByTagName('form')[0].addEventListener('submit', (e) => {
          e.preventDefault();

          let form = e.target;

          fetch(form.action, { method: form.method, body: new FormData(form) })
            .then(response => response.json())
            .then(json => console.log(json));

          return false;
        });
      });
    </script>
  </body>
</html>