Metody sprawdzania i modyfikowania za pomocą formularzy FormData

Sam Thorogood

FormData to najlepszy przyjaciel użytkownika XHR, który w Chrome 50 zyska nowe funkcje. Dodajemy metody, które umożliwiają sprawdzanie obiektów FormData lub ich modyfikowanie po fakcie. Możesz teraz używać funkcji get(), delete() i elementów pomocniczych iteracji, takich jak entries czy keys. (zobacz pełną listę).

Jeśli nie korzystasz jeszcze z interfejsu FormData, to prosty, dobrze obsługiwany interfejs API, który umożliwia tworzenie wirtualnego formularza za pomocą kodu i przesyłanie go do odległego miejsca za pomocą interfejsu window.fetch() lub XMLHttpRequest.send(formData).

Poniżej znajdziesz kilka przykładów.

Analizowanie prawdziwych formularzy jak zawodowiec

FormData można utworzyć na podstawie rzeczywistego formularza HTML, wykonując zrzut wszystkich jego bieżących wartości. Jednak obiekt był całkowicie nieprzejrzysty. Wszystko, co możesz zrobić, to wysłać go w niezmienionej formie na serwer. Teraz możesz go wziąć, zmodyfikować, powiększyć, zmniejszyć, zmienić i wreszcie 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 danych formularza

Jeśli tworzysz własną FormData od podstaw, możesz być zniechęcony tym, że nie możesz jej użyć ponownie – poświęciłeś na te pola sporo czasu. Zarówno metoda window.fetch(), jak i XMLHttpRequest.send() tworzy zrzut ekranu FormData, więc możesz bezpiecznie ponownie używać i modyfikować swoich treści. Zapoznaj się z tym przykładem:

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