Interfejs JavaScript FormData udostępnia metodę tworzenia obiektu posiadającego pary klucz-wartość. Obiekty te można udostępniać w Internecie za pomocą metody fetch() lub XMLHttpRequest.send(). Wykorzystuje funkcjonalność elementu formularza HTML. Będzie używał tego samego formatu, który będzie używany przez formę kodowania ustawioną na „multipart/form-data”.
Możemy także przekazać go bezpośrednio do konstruktora URLSearchParams, aby uzyskać parametry zapytania takie, jak w przypadku zachowania tagu przy przesyłaniu żądania GET.
Ogólnie rzecz biorąc, służy do tworzenia zestawu danych, który wysyła go na serwer. Obiekt FormData jest tablicą tablic zawierającą jedną tablicę dla każdego elementu.
Tablice te mają następujące trzy wartości:
nazwa: Zawiera nazwę pola.
wartość: Zawiera wartość pola, która może być obiektem typu String lub Blob.
Nazwa pliku: Zawiera nazwę pliku, która jest ciągiem znaków przechowującym nazwę. Nazwa zostanie zapisana na serwerze, gdy obiekt blob zostanie przekazany jako obiekt 2IIparametr.
Dlaczego FormData?
Elementy formularza HTML są opracowane w sposób, który automatycznie przechwytuje jego pola i wartości. W takich sytuacjach interfejs FormData pomaga nam wysyłać formularze HTML z plikami lub bez plików i dodatkowych pól.
Jest to obiekt zawierający dane formularza wprowadzane przez użytkownika.
Poniżej znajduje się konstruktor danych formularza:
let formData = new FormData([form]);
Obiekty FormData mogą być akceptowane jako treść za pomocą metod sieciowych, takich jak fetch. Domyślnie jest kodowany i wysyłany z typem zawartości: multipart/form-data.
Serwer potraktuje to jako zwykłe przesłanie formularza.
Rozważmy prosty przykład wysyłania FormData.
Wysyłanie podstawowych danych formularza
W poniższym formularzu wysyłamy na serwer prosty formularz FormData.
Indeks.html:
formElem.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); Console.log(result); }; W powyższym przykładzie nie konfigurujemy żadnego interfejsu API zaplecza do wysyłania danych, ponieważ wykracza to poza zakres tego samouczka. Możemy jednak sprawdzić ładunek na karcie sieci i zrozumieć, jak działa interfejs FormData.
Jeśli więc spojrzymy na żądanie sieciowe w narzędziu programistycznym, wyświetli się poniższy ładunek:
W powyższym żądaniu sieciowym dane formularza są przesyłane przez sieć za pomocą obiektu FormData. W inny sposób musimy określić wiele metod pobierania danych z formularza.
Dzięki temu korzystając z interfejsu FormData możemy w łatwy sposób przesłać formularzData na serwer. To po prostu kod jednowierszowy.
Konstruktor danych formularza
Konstruktor FormData() służy do tworzenia nowego obiektu FormData. Można go używać w następujący sposób:
new FormData() new FormData(form) new FormData(form, submitter)
Parametry:
formularz (opcjonalnie):
Jest to element HTML; jeśli jest określony, obiekt FormData zostanie wypełniony bieżącymi kluczami/wartościami formularza. Używa właściwości atrybutu nazwy każdego elementu jako kluczy i przesłanej wartości jako wartości. Koduje także zawartość wejściową pliku.
zgłaszający (opcjonalnie):
Przycisk zgłaszającego jest elementem formularza. Jeżeli element Submitter posiada właściwość atrybutu name, to jego dane zostaną zawarte w obiekcie FormData.
ciąg ti wew
Metody FormData
FormData udostępnia kilka metod, które mogą być pomocne w uzyskiwaniu dostępu i modyfikowaniu danych pól formularza.
W mniejszych przypadkach może zaistnieć konieczność zmiany danych formularza przed wysłaniem go na serwer. Metody te mogą być pomocne w takich przypadkach.
Poniżej znajduje się kilka przydatnych metod formData:
macierz w języku c
formData.append(nazwa, wartość)
Pobiera nazwę i wartość dwóch argumentów i dodaje obiekt pola formularza o podanej nazwie i wartości.
formData.append(nazwa, obiekt blob, nazwa pliku)
Pobiera argumenty name, blob i fileName. Dodaje pole do tworzenia obiektów danych, jeśli elementem HTML jest , a następnie trzeci argument nazwa_pliku ustawia nazwę pliku zgodną z nazwą pliku w systemie plików użytkownika.
formData.delete(nazwa)
Przyjmuje nazwę jako argument i usuwa określone pole o tej samej nazwie.
formData.get(nazwa)
Przyjmuje również nazwę jako argument i pobiera wartość określonego pola o podanej nazwie.
formData.has(nazwa)
Przyjmuje również nazwę jako argument, sprawdza istnienie pola o podanej nazwie i zwraca wartość true, jeśli istnieje; w przeciwnym razie fałszywe.
Formularz może zawierać wiele pól o tej samej nazwie, dlatego musimy określić wiele metod dołączania, aby dodać wszystkie pola o tej samej nazwie.
Jednak pola o tej samej nazwie będą powodować błędy i powodować złożoność podczas ustawiania ich w bazie danych. Zatem formData udostępnia inną metodę o tej samej składni co append, ale usuwa wszystkie pola o podanej nazwie, a następnie dołącza nowe pole. Dzięki temu masz pewność, że będzie unikalny klucz z nazwą.
formData.set(name, value) formData.set(name, blob, fileName)
W metodzie set składnia działa podobnie jak metoda append.
Jak iterować dane formularza?
FormData udostępnia metodę FormData.entries() umożliwiającą iterację po wszystkich kluczach. Ta metoda zwraca iterator, który iteruje po wszystkich wpisach klucz/wartość w FormData. Klucz jest obiektem typu string, natomiast wartością może być obiekt typu blob lub ciąg.
Rozważ poniższy przykład:
formData.append('key1', 'value1'); formData.append('key2', 'value2'); // Display the key/value pairs for (const pair of formData.entries()) { console.log(`${pair[0]}, ${pair[1]}`); } Wynikiem powyższego przykładu będzie:
key1, value1 key2, value2
Wysłanie formularza z plikiem danych
Pliki można także przesłać za pomocą metody FormData. Pliki działają na elemencie formularza i są wysyłane jako Content-Type: multipart/form-data. Kodowanie danych wieloczęściowych/formularzy umożliwia wysyłanie plików. Domyślnie jest to część danych formularza. Pliki możemy wysłać na serwer z kodowaniem formularza-danych.
Rozważ poniższy przykład:
File: myform.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) console.log(data) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); }; W powyższym przykładzie obiekt obrazu przesyłany jest w formacie binarnym za pomocą metody FormData. Możemy to sprawdzić w zakładce sieci narzędzia deweloperskiego:
Wysyłanie danych formularza jako obiektu Blob
Wysyłanie danych formularza jako obiektu typu blob to łatwy sposób wysyłania dynamicznie generowanych danych binarnych. Może to być dowolny obraz lub kropelka; możemy bezpośrednio wysłać go na serwer, przekazując go w treści pobierania.
Wygodne jest wysyłanie danych obrazu i innych danych formularzy, takich jak imię i nazwisko, hasło itp. Ponadto serwery łatwiej akceptują formularze zakodowane wieloczęściowo niż dane binarne.
Rozważ poniższy przykład, w którym obraz jest wysyłany wraz z innymi danymi formularza jako formularz.
mycanvas.onmousemove = function(e) { let ctx = mycanvas.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let imageBlob = await new Promise(resolve => mycanvas.toBlob(resolve, 'image/png')); let formData = new FormData(); formData.append('firstName', 'Alex'); formData.append('image', imageBlob, 'image.webp'); let response = await fetch('url', { method: 'POST', body: formData }); let result = await response.json(); alert(result.message); } W powyższym przykładzie obiekt blob obrazu został dodany w następujący sposób:
formData.append('image', imageBlob, 'image.webp');
Co jest tym samym, co , a użytkownik przesłał plik o nazwie „image.webp” zawierający pewne dane imageBlob z systemu plików. Serwer odczyta je jako dane w normalnym formularzu.