Metodi FormData per l'ispezione e la modifica

Sam Thorogood

Twitter GitHub Glitch Homepage

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 modificarli successivamente. Ora puoi utilizzare get(), delete() e assistenti per l'iterazione come entries, keys e altri. Consulta l'elenco completo.

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

Per alcuni esempi, continua a leggere.

Analizza le forme reali da professionista

FormData può essere creato a partire da un modulo HTML reale, acquisendo un'istantanea di tutti i suoi valori attuali. Tuttavia, l'oggetto era completamente opaco. Tutto ciò che potevi fare era inviarlo, senza modifiche, a un server. Ora puoi prenderlo, modificarlo, sovraccaricarlo, osservarlo, rimpicciolirlo, modificarlo e, infine, caricarlo:

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 il precedente XMLHttpRequest:

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

Non buttare via i tuoi FormData

Se stai creando il tuo FormData da zero, potresti aver trovato frustrante non poter riutilizzare l'app perché hai dedicato molto tempo a questi campi. Poiché entrambi i metodi window.fetch() e XMLHttpRequest.send() creano un'istantanea di FormData, ora puoi riutilizzare e modificare in sicurezza il tuo lavoro. Guarda 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});