Ajax plus facile avec l'interface HTML5 FormData

La gestion des soumissions de formulaire via AJAX est cruciale pour les applications à une page et l'amélioration progressive. Examinons une forme typique:

<form id="myform" action="webservice.php" method="post">
  <input type="email" name="email" />
  <select name="job">
    <option value="">Select Role</option>
    <option>web developer</option>
    <option>IT professional</option>
    <option>other</option>
  </select>
  <input type="checkbox" name="freelancer" /> are you a freelancer?
  <input type="radio" name="experience" value="4" /> less than 5 year's experience
  <input type="radio" name="experience" value="5" /> 5 or more year's experience
  <textarea name="comments" rows="3" cols="60"></textarea>
  <input type="submit" value="Submit">
</form>

jQuery simplifie la sérialisation des données de formulaire pour ajax:

$("#myform").on("submit", function(e) {
  e.preventDefault();
  $.post(this.action, $(this).serialize());
});

JavaScript simple nécessite une extraction manuelle des données:

document.getElementById("myform").onsubmit = function(e) {
  e.preventDefault();
  var f = e.target, formData = '', xhr = new XMLHttpRequest();
  for (var i = 0, d, v; i < f.elements.length; i++) {
    d = f.elements[i];
    if (d.name && d.value) {
      v = (d.type == "checkbox" || d.type == "radio" ? (d.checked ? d.value : '') : d.value);
      if (v) formData += d.name + "=" + escape(v) + "&";
    }
  }
  xhr.open("POST", f.action);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
  xhr.send(formData);
};

Cependant, l'interface HTML5 FormData rationalise considérablement ce processus:

document.getElementById("myform").onsubmit = function(e) {
  e.preventDefault();
  var f = e.target, formData = new FormData(f), xhr = new XMLHttpRequest();
  xhr.open("POST", f.action);
  xhr.send(formData);
};

Ce code concis est plus rapide et plus lisible que l'équivalent jQuery. FormData gère automatiquement l'encodage. Il utilise multipart/form-data, activant les téléchargements de fichiers. Vous pouvez également ajouter les données manuellement:

var formData = new FormData();
formData.append("name", "value");
formData.append("a", 1);
formData.append("b", 2);

Les fichiers ou blobs peuvent être ajoutés avec des noms de fichiers en option. FormData bénéficie d'un large support de navigateur, à l'exclusion uniquement des versions très anciennes. Pour plus de détails, consultez la documentation de référence FormData et MDN.

Des questions fréquemment posées sur l'interface HTML5 FormData et Ajax

Quelle est l'interface HTML5 FormData et comment cela fonctionne-t-il avec ajax?

L'interface html5 FormData simplifie la création de paires de valeurs clés représentant des données de formulaire pour les demandes AJAX. AJAX active l'échange de données asynchrones avec le serveur, mettant à jour les pages Web sans rechargement complet.

Comment puis-je créer un objet FormData?

Utilisez new FormData() pour un objet vide ou new FormData(formElement) pour en créer un à partir d'un élément de formulaire.

Comment puis-je ajouter des données à un objet FormData?

Utilisez la méthode append(name, value).

Comment puis-je envoyer un objet FormData avec une demande ajax?

Utiliser xhr.send(formData). L'en-tête Content-Type est automatiquement réglé sur multipart/form-data.

Puis-je utiliser l'interface FormData avec la méthode AJAX de JQuery?

oui, mais définissez processData: false et contentType: false.

Comment puis-je vérifier si un navigateur prend en charge l'interface FormData?

utiliser if ("FormData" in window) { ... }.

Puis-je utiliser l'interface FormData pour envoyer des fichiers?

oui, appelez File ou Blob objets.

Puis-je supprimer les données d'un objet FormData?

Oui, utilisez la méthode delete(name).

puis-je itérer les données dans un objet FormData?

oui, utilisez entries(), keys(), values(), ou forEach().

Puis-je utiliser l'interface FormData avec Fetch?

Oui, passez-le comme le body de la demande 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!