Metody sprawdzania i modyfikowania za pomocą formularzy FormData

Sam Thorogood

FormData to najlepszy przyjaciel użytkownika XHR. Teraz przeglądarka Chrome 50 jest uaktualniana. Dodajemy metody umożliwiające sprawdzanie obiektów FormData lub modyfikowanie ich po fakcie. Możesz teraz korzystać z usług pomocy get(), delete() oraz iteracji, takich jak entries czy keys. (zapoznaj się z pełną listą).

Jeśli nie korzystasz jeszcze z FormData, skorzystaj z prostego, dobrze obsługiwanego interfejsu API, który pozwala automatycznie utworzyć wirtualny formularz i przesłać go w odległe miejsce za pomocą window.fetch() lub XMLHttpRequest.send(formData).

Więcej przykładów znajdziesz w dalszej części tego artykułu.

Analizuj prawdziwe formy

Element FormData można utworzyć z prawdziwego formularza HTML i wygenerować zrzut wszystkich jego bieżących wartości. Kiedyś był jednak całkowicie nieprzezroczysty. Można było tylko wysłać je na serwer w niezmienionej postaci. Teraz możesz go wziąć, zmodyfikować, wygiąć, obserwować, zmniejszyć, zmienić, a na koniec przesłać:

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

Możesz też wysłać FormData za pomocą starszej wersji XMLHttpRequest:

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

Nie wyrzucaj swoich FormData

Jeśli budujesz własne urządzenie FormData od podstaw, to prawdopodobnie nie możesz go ponownie wykorzystać, bo zajęło Ci to sporo czasu. Zarówno metody window.fetch(), jak i XMLHttpRequest.send() wykonują kopię zapasową danych z obiektu FormData, więc możesz teraz bezpiecznie ponownie wykorzystywać i modyfikować swoją pracę. Przyjrzyj się temu przykładowi:

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