Métodos FormData para la inspección y la modificación

Sam Thorogood

FormData es el mejor amigo del usuario de XHR y recibirá una actualización en Chrome 50. Agregaremos métodos que te permitirán inspeccionar tus objetos FormData o modificarlos después de que se hayan creado. Ahora puedes usar get(), delete() y asistentes de iteración como entries, keys y mucho más. (consulta la lista completa).

Si aún no usas FormData, es una API simple y bien admitida que te permite compilar de forma programática un formulario virtual y enviarlo a un lugar lejano con window.fetch() o XMLHttpRequest.send(formData).

Sigue leyendo para ver algunos ejemplos.

Analiza formularios reales como un profesional

FormData se puede crear a partir de un formulario HTML real, tomando una instantánea de todos sus valores actuales. Sin embargo, el objeto solía ser completamente opaco. Todo lo que podías hacer era enviarlo, sin cambios, a un servidor. Ahora puedes tomarla, modificarla, moverla, observarla, reducirla, cambiarla y, por último, subirla:

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});
}

También puedes enviar FormData a través del XMLHttpRequest anterior:

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

No descartes tu FormData

Si estás compilando tu propio FormData desde cero, es posible que te haya resultado frustrante no poder reutilizarlo, ya que dedicaste mucho tiempo a esos campos. Como los métodos window.fetch() y XMLHttpRequest.send() toman una instantánea de FormData, ahora puedes volver a usar y modificar tu trabajo de forma segura. Consulta este ejemplo:

// 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});