FormData en JavaScript : guide définitif sur la gestion des formulaires

L'objet FormData de JavaScript offre un moyen pratique de gérer les données d'un formulaire HTML, en particulier lorsque vous utilisez AJAX ou fetch pour envoyer des données à un serveur. Le constructeur new FormData() crée une nouvelle instance FormData.

Vous pouvez transmettre des éléments de formulaire HTML directement en tant que paramètres à new FormData(). Le constructeur collecte automatiquement toutes les données des champs de saisie du formulaire, y compris les zones de texte, les cases à cocher, les boutons radio et les champs de téléchargement de fichiers, et les ajoute à l'objet FormData.

Avantages de l'utilisation de FormData

Le principal avantage de

FormData est qu'il simplifie le traitement des données complexes, notamment lorsque le formulaire contient plusieurs champs ou fichiers. Il formate automatiquement les données dans le corps de la requête HTTP approprié et définit les informations d'en-tête multipart/form-data nécessaires. Cela fait de FormData un choix idéal pour l'envoi dynamique de données de formulaire dans des applications Web modernes sans actualisation de page, offrant ainsi une solution de traitement de formulaire efficace et flexible.

Exemple sans éléments de formulaire

L'exemple suivant montre comment créer un objet FormData sans s'appuyer sur un élément de formulaire :

<code class="language-javascript">const formData = new FormData();

// 手动添加数据
formData.append('nombre', 'John Serrano');
formData.append('edad', 30);
formData.append('archivo', fileInput.files[0]);

// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服务器响应:', data);
  })
  .catch((error) => {
    console.error('发送数据出错:', error);
  });</code>

Description :

1. Crée un objet FormData vide.
2. Ajoutez des paires clé-valeur manuellement à l'aide de la méthode append(). Par exemple, formData.append('nombre', 'John Serrano') ajoute un champ nommé nombre avec une valeur de John Serrano. Vous pouvez également ajouter des fichiers directement, tels que fileInput.files[0].
3. Utilisez fetch pour envoyer l'objet FormData au serveur. fetch définira automatiquement l'en-tête Content-Type sur multipart/form-data.

Cette approche est utile lorsque vous devez créer dynamiquement des données sans recourir à des formulaires HTML.

Exemples d'utilisation d'éléments de formulaire

L'exemple suivant montre comment créer un objet FormData à l'aide d'éléments de formulaire HTML :

<code class="language-javascript">// 获取表单元素
const formulario = document.getElementById('miFormulario');

// 使用表单元素创建 FormData 对象
const formData = new FormData(formulario);

// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服务器响应:', data);
  })
  .catch((error) => {
    console.error('发送数据出错:', error);
  });</code>

Description :

1. Un formulaire HTML contenant différents champs de saisie (texte, chiffres, fichiers). L'attribut name de chaque champ est crucial car il détermine le nom de la clé dans l'objet FormData.
2. Passez l'élément du formulaire en paramètre à new FormData() et le constructeur collectera automatiquement les données du formulaire.
3. Utilisez fetch pour envoyer des données au serveur.

Traitement et sérialisation des données du formulaire

Certaines API (telles que JSON Placeholder) n'acceptent pas FormData les objets et attendent à la place des objets JSON. Pour convertir FormData en JSON, vous pouvez utiliser une boucle pour parcourir ses paires clé-valeur :

<code class="language-javascript">const obj = {};
const formData = new FormData(form);

for (const key of formData.keys()) {
  obj[key] = formData.get(key);
}</code>

ou de manière plus concise Object.fromEntries() :

<code class="language-javascript">const formData = new FormData();

// 手动添加数据
formData.append('nombre', 'John Serrano');
formData.append('edad', 30);
formData.append('archivo', fileInput.files[0]);

// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服务器响应:', data);
  })
  .catch((error) => {
    console.error('发送数据出错:', error);
  });</code>

Exemple de réaction

<code class="language-javascript">// 获取表单元素
const formulario = document.getElementById('miFormulario');

// 使用表单元素创建 FormData 对象
const formData = new FormData(formulario);

// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服务器响应:', data);
  })
  .catch((error) => {
    console.error('发送数据出错:', error);
  });</code>

Résumé

FormData est un outil puissant pour travailler avec les données de formulaire en JavaScript, qui simplifie le processus de collecte et d'envoi de données. Bien que toutes les API ne prennent pas en charge FormData, vous pouvez facilement le convertir vers d'autres formats comme JSON. L'utilisation de FormData peut augmenter la flexibilité et l'efficacité du traitement des formulaires, en particulier lors de l'utilisation d'AJAX ou de fetch.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!