Metodi FormData per l'ispezione e la modifica

Sam Thorogood

FormData è il migliore amico dell'utente XHR e sta ricevendo un upgrade in Chrome 50. Stiamo aggiungendo metodi che ti consentono di ispezionare gli oggetti FormData o di modificarli in un secondo momento. Ora puoi utilizzare get(), delete() e gli aiuti per l'iterazione come entries, keys e altri ancora. (Dai un'occhiata all'elenco completo.)

Se non utilizzi già FormData, si tratta di un'API semplice e ben supportata che ti consente di creare ed eseguire in modo programmatico un modulo virtuale e di inviarlo a una località lontana utilizzando window.fetch() o XMLHttpRequest.send(formData).

Continua a leggere per alcuni esempi.

Analizza i moduli reali come un professionista

FormData può essere creato da un modulo HTML reale, acquisendo uno snapshot di tutti i relativi valori correnti. Tuttavia, l'oggetto era completamente opaco. Non potevi fare altro che inoltrarlo, invariato, a un server. Ora puoi scattarla, modificarla, osservarla, ridurla, cambiarla e infine caricarla:

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

Puoi anche inviare FormData tramite la versione precedente di XMLHttpRequest:

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

Non eliminare FormData

Se stai creando il tuo FormData da zero, potresti aver trovato frustrante non poterlo riutilizzare, dato che hai dedicato molto tempo a questi campi. Poiché entrambi i metodi window.fetch() e XMLHttpRequest.send() acquisiscono uno snapshot del FormData, ora puoi riutilizzare e modificare in sicurezza il tuo lavoro. Dai un'occhiata a questo esempio:

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