Méthodes FormData pour l'inspection et la modification

Sam Thorogood

FormData est le meilleur ami des utilisateurs XHR. Il est mis à niveau dans Chrome 50. Nous ajoutons des méthodes qui vous permettent d'inspecter vos objets FormData ou de les modifier après coup. Vous pouvez désormais utiliser get(), delete() et des outils d'itération tels que entries, keys, etc. (Consultez 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 de manière programmatique un formulaire virtuel et de l'envoyer à un emplacement éloigné à l'aide de window.fetch() ou XMLHttpRequest.send(formData).

Pour en savoir plus, lisez la suite.

Analyser des formulaires réels comme un pro

FormData peut être construit à partir d'un véritable formulaire HTML, en prenant un instantané de toutes ses valeurs actuelles. Toutefois, l'objet était auparavant entièrement opaque. Tout ce que vous pouviez faire était de l'envoyer, sans modification, à un serveur. Vous pouvez maintenant la prendre, la modifier, la faire bouger, l'observer, la réduire, la changer 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 des FormData via l'ancienne 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 la réutiliser, car vous avez passé beaucoup de temps sur ces champs. Comme les méthodes window.fetch() et XMLHttpRequest.send() prennent un instantané de la FormData, vous pouvez désormais réutiliser et modifier votre travail en toute sécurité. Voici un 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});