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

Nombre de persona

FormData es el mejor amigo del usuario XHR y se actualizará en Chrome 50. Agregamos métodos que te permiten inspeccionar tus objetos FormData o modificarlos después del hecho. Ahora puedes usar get(), delete() y ayudantes de iteración como entries, keys y muchos más. (consulta la lista completa).

Si todavía no usas FormData, es una API simple bien compatible que te permite compilar de manera programática un formulario virtual y enviarlo a un lugar lejano usando window.fetch() o XMLHttpRequest.send(formData).

Para ver algunos ejemplos, sigue leyendo.

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 modificar, a un servidor. Ahora, puedes tomarla, modificarla, hacer un bop, 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 de XMLHttpRequest anterior:

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

No descartes tus FormData

Si estás compilando tu propio FormData desde cero, es posible que te resulte frustrante no poder volver a usarlo, ya que pasaste mucho tiempo en esos campos. Como los métodos window.fetch() y XMLHttpRequest.send() toman una instantánea del FormData, ahora puedes volver a usar y modificar tu trabajo de forma segura. Echa un vistazo a 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});