Formulaire

Avec fetch Il est possible de communiquer simplement des données à un serveur grâce aux objets FormData.

Prenons un formulaire avec un champ texte et un bouton de validation :

1
<form>
2
  <input name="texte">
3
  <button type="submit">Envoyer</button>
4
</form>

Au clic sur le bouton, on génère l'objet formData qui contient les données du formulaire

1
const form = document.querySelector("form");
2
3
form.addEventListener("submit", (event) => {
4
  event.preventDefault();
5
  const formData = new FormData(form);
6
});
C'est dans le deuxième paramètre de fetch() que l'on transmet sous forme d'objet le formulaire ainsi que la méthode POST.
1
const url = "traitement.php";
2
const form = document.querySelector("form");
3
4
form.addEventListener("submit", (event) => {
5
  event.preventDefault();
6
  const formData = new FormData(form);
7
8
  fetch(url, {
9
    method: "POST",
10
    body: formData,
11
  }).then((response) =>
12
    response.text().then((data) => console.log(data))
13
  );
14
});
15
 
Le fichier de traitement (traitement.php) récupère les valeurs du formulaire et retourne le texte à transmettre au client.
1
<?php
2
$texte = $_POST['texte'] ?? "";
3
4
echo "j'ai bien reçu le texte : $texte";
ComplémentJSON
Pour récupérer la réponse sous forme de tableau d'objets, nous utilisons JSON.
1
const url = "traitement.php";
2
const form = document.querySelector("form");
3
4
form.addEventListener("submit", (event) => {
5
  event.preventDefault();
6
  const formData = new FormData(form);
7
8
  fetch(url, {
9
    method: "POST",
10
    body: formData,
11
  }).then((response) =>
12
    response.json().then((data) => console.log(data))
13
  );
14
});
Pour le traitement
1
<?php
2
3
echo json_encode($_POST);
ComplémentFormData
Il existe plusieurs méthodes qui permettent de modifier le FormData :
append(nom, valeur) :ajoute une donnée
delete(nom) : supprime une donnée
get(nom) : retourne la valeur
getAll(nom) : retourne les valeurs d'une clé tableau
has(nom) : vérifie l’existence d'une clé
entries() : retourne la liste des données
keys() : retourne la liste des clés
values() : retourne la liste des valeurs
Pour transmettre un tableau de valeurs la clé doit terminer par [] :
1
const formData = new FormData;
2
3
formData.append('name[]', 1);
4
formData.append('name[]', 2);
5
formData.append('name[]', 3);
6
7
console.log(formData.getAll('name[]')); // ["1","2","3"]