FormData

Bu bob HTML formalarni yuborish haqida: fayllar bilan yoki faylsiz, qo’shimcha maydonlar bilan va hokazo.

FormData obyektlari bunda yordam berishi mumkin. Taxmin qilganingiz kabi, bu HTML form ma’lumotlarini ifodalash uchun obyekt.

Konstruktor:

let formData = new FormData([form]);

Agar HTML form elementi berilsa, u avtomatik ravishda uning maydonlarini oladi.

FormData ning o’ziga xos tomoni shundaki, fetch kabi tarmoq usullari FormData obyektini body sifatida qabul qilishi mumkin. U kodlanadi va Content-Type: multipart/form-data bilan yuboriladi.

Server nuqtai nazaridan, bu odatiy form yuborish kabi ko’rinadi.

Oddiy formani yuborish

Avval oddiy formani yuboraylik.

Ko’rib turganingizdek, bu deyarli bir qator:

<form id="formElem">
  <input type="text" name="name" value="John">
  <input type="text" name="surname" value="Smith">
  <input type="submit">
</form>

<script>
  formElem.onsubmit = async (e) => {
    e.preventDefault();

    let response = await fetch('/article/formdata/post/user', {
      method: 'POST',
      body: new FormData(formElem)
    });

    let result = await response.json();

    alert(result.message);
  };
</script>

Ushbu misolda server kodi ko’rsatilmagan, chunki u bizning doiramizdan tashqarida. Server POST so’rovni qabul qiladi va “Foydalanuvchi saqlandi” deb javob beradi.

FormData Metodlari

FormData da maydonlarni metodlar bilan o’zgartirishimiz mumkin:

• formData.append(name, value) – berilgan name va value bilan form maydoni qo’shish,
• formData.append(name, blob, fileName) – maydonni <input type="file"> kabi qo’shish, uchinchi argument fileName fayl nomini o’rnatadi (form maydon nomi emas), xuddi foydalanuvchi fayl tizimidagi faylning nomi kabi,
• formData.delete(name) – berilgan name li maydonni o’chirish,
• formData.get(name) – berilgan name li maydonning qiymatini olish,
• formData.has(name) – agar berilgan