Méthodes FormData pour l'inspection et la modification

Sam Thorogood

FormData est le meilleur ami de l'utilisateur de XHR, et il est mis à niveau dans Chrome 50. Nous ajoutons des méthodes vous permettant d'inspecter vos objets FormData ou de les modifier a posteriori. Vous pouvez désormais utiliser get(), delete(), ainsi que des assistants d'itération comme entries, keys, etc. (consulter la liste complète)

Si vous n'utilisez pas encore FormData, il s'agit d'une API simple et bien prise en charge qui vous permet de créer un formulaire virtuel par programmation et de l'envoyer à une destination éloignée à l'aide de window.fetch() ou XMLHttpRequest.send(formData).

Pour obtenir des exemples, poursuivez votre lecture.

Analyser des formes réelles comme un pro

FormData peut être construit à partir d'un formulaire HTML réel, en prenant un instantané de toutes ses valeurs actuelles. Toutefois, l'objet était autrefois entièrement opaque. Tout ce que vous pouviez faire était de l’envoyer, tel que modifié, à un serveur. Maintenant, vous pouvez le prendre, le modifier, le corriger, l'observer, le réduire, le modifier et enfin, l'importer:

function sendRequest(theFormElement) {
    var formData = new FormData(theFormElement);
    formData.delete("secret_user_data"); // don't include this one!
    if (formData.has("include_favorite_color")) {
    formData.set("color", userPrefs.getColor());
    }
    // log all values like <input name="widget">
    console.info("User selected widgets", formData.getAll("widget"));

    window.fetch(url, {method: 'POST', body: formData});
}

Vous pouvez également envoyer FormData via l'ancien XMLHttpRequest:

var x = new XMLHttpRequest();
x.open('POST', url);
x.send(formData);

Ne jetez pas vos données FormData

Si vous créez votre propre FormData à partir de zéro, vous avez peut-être trouvé frustrant de ne pas pouvoir le réutiliser. En effet, vous avez passé beaucoup de temps sur ces champs. Comme les méthodes window.fetch() et XMLHttpRequest.send() prennent un instantané de FormData, vous pouvez désormais réutiliser et modifier votre travail en toute sécurité. Consultez cet exemple:

// append allows multiple values for the same key
var formData = new FormData();
formData.append("article", "id-123");
formData.append("article", "id-42");

// send like request
formData.set("action", "like");
window.fetch(url, {method: 'POST', body: formData});

// send reshare request
formData.set("action", "reshare");  // overrides previous "action"
window.fetch(url, {method: 'POST', body: formData});