Métodos FormData para inspeção e modificação

Sam Thorogood

FormData é o melhor amigo do usuário do XHR e vai receber um upgrade no Chrome 50. Estamos adicionando métodos que permitem inspecionar seus objetos FormData ou modificá-los após o fato. Agora você pode usar get(), delete() e auxiliares de iteração, como entries, keys e muito mais. Confira a lista completa.

Se você ainda não usa o FormData, ele é uma API simples e com suporte que permite criar programaticamente um formulário virtual e enviá-lo a um local distante usando window.fetch() ou XMLHttpRequest.send(formData).

Para conferir alguns exemplos, continue lendo.

Analise formulários reais como um profissional

FormData pode ser criado a partir de um formulário HTML real, fazendo um instantâneo de todos os valores atuais. No entanto, o objeto costumava ser totalmente opaco. Tudo o que você podia fazer era enviá-lo sem alterações a um servidor. Agora, você pode pegar, modificar, bater, observar, reduzir, mudar e, por fim, fazer upload:

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

Também é possível enviar FormData pelo XMLHttpRequest mais antigo:

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

Não descarte os FormData

Se você estiver criando seu próprio FormData do zero, talvez tenha achado frustrante não poder reutilizá-lo. Você passou muito tempo nesses campos. Como os métodos window.fetch() e XMLHttpRequest.send() capturam um snapshot do FormData, agora você pode reutilizar e modificar seu trabalho com segurança. Confira este exemplo:

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