Méthodes FormData pour l'inspection et la modification

Sam Thorogood

FormData est le meilleur ami de l'utilisateur XHR, et sa mise à niveau est effectuée dans Chrome 50. Nous ajoutons des méthodes pour vous permettre d'inspecter vos objets FormData ou de les modifier a posteriori. Vous pouvez désormais utiliser get(), delete() et des assistants d'itération tels que entries, keys, etc. Voir 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 par programmation un formulaire virtuel et de l'envoyer ailleurs à l'aide de window.fetch() ou XMLHttpRequest.send(formData).

Pour obtenir des exemples, continuez votre lecture.

Analyser des formulaires réels comme un pro

FormData peut être créé à partir d'un formulaire HTML réel, prenant un instantané de toutes ses valeurs actuelles. Cependant, l'objet était jusqu'à présent entièrement opaque. Tout ce que vous pouviez faire était de l'envoyer sur un serveur, inchangé. Vous pouvez maintenant le prendre, le modifier, le faire rebondir, 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'ancienne version de 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. 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 maintenant réutiliser et modifier votre travail en toute sécurité. Regardez 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});