Tarmoq so'rovlari

FormData

Ko'pincha serverga oddiy ma'lumot emas, balki forma ma'lumotlarini yoki hatto fayllarni yuborish kerak bo'ladi. Buning uchun FormData maxsus obyekti mavjud. U forma maydonlarini tarmoqqa mos formatda avtomatik tayyorlaydi.

FormData nima?

FormData — bu forma maydonlari va ularning qiymatlarini saqlaydigan maxsus obyekt. Uni fetchning bodysiga to'g'ridan-to'g'ri berish mumkin — brauzer avtomatik ravishda to'g'ri Content-Type (multipart/form-data) sarlavhasini qo'yadi.

let formData = new FormData([form]);

Argument sifatida HTML <form> elementini berish mumkin — u holda forma ichidagi barcha maydonlar avtomatik olinadi. Argumentsiz chaqirilsa, bo'sh FormData yaratiladi.

HTML formadan FormData yaratish

Agar sahifada forma bo'lsa, uni to'g'ridan-to'g'ri FormDataga uzatib, serverga yuborish mumkin:

// HTML: <form id="myForm">
//   <input name="name" value="Ali">
//   <input name="email" value="ali@example.com">
// </form>

let form = document.getElementById('myForm');
let formData = new FormData(form);

let response = await fetch('https://api.example.com/submit', {
  method: 'POST',
  body: formData
});
Diqqat: bu yerda Content-Type sarlavhasini o'zimiz qo'ymaymiz! FormData berilganda brauzer uni avtomatik multipart/form-data qilib, ichiga maxsus chegara (boundary) belgisini ham qo'shadi. Agar o'zimiz qo'ysak, bu buziladi.

Maydonlarni boshqarish: append, set, delete

FormData obyektiga maydonlarni dasturiy tarzda qo'shish va o'zgartirish mumkin:

let formData = new FormData();

formData.append('name', 'Ali');
formData.append('email', 'ali@example.com');
formData.append('name', 'Vali'); // ikkinchi 'name' maydoni

console.log(formData.get('name')); // 'Ali' (birinchisi)

formData.set('name', 'Salim'); // barcha 'name'larni bittaga almashtiradi
console.log(formData.get('name')); // 'Salim'

formData.delete('email');
console.log(formData.has('email')); // false
append va set orasidagi farqni eslang: append bir xil nomdan bir nechta qo'shishga ruxsat beradi, set esa har doim faqat bittasini qoldiradi. Massiv shaklidagi ma'lumot yuborganda append qulay.

Fayl yuborish

FormDataning eng kuchli tomoni — fayllarni yuborish imkoniyati. Foydalanuvchi tanlagan faylni <input type="file">dan olib yuborishimiz mumkin:

// HTML: <input type="file" id="fileInput">

let fileInput = document.getElementById('fileInput');
let formData = new FormData();

// Tanlangan faylni qo'shamiz
formData.append('avatar', fileInput.files[0]);
formData.append('userId', '123');

let response = await fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData
});

Bu yerda fileInput.files[0] — foydalanuvchi tanlagan birinchi fayl. U File obyekti bo'lib, Blobning bir turi hisoblanadi.

Dinamik ravishda Blob yaratib yuborish

Ba'zan faylni foydalanuvchidan olmasdan, kod ichida yaratib yuborish kerak bo'ladi. Masalan, canvas'dagi rasmni yoki matnli faylni:

// Matnli 'fayl' yaratib yuborish
let content = 'Salom, bu fayl mazmuni!';
let blob = new Blob([content], { type: 'text/plain' });

let formData = new FormData();
formData.append('file', blob, 'salom.txt');

let response = await fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData
});
Uchinchi argument ('salom.txt') — fayl nomi. U server tomonida faylni saqlashda ishlatiladi. Blob yuborayotganda fayl nomini berish yaxshi amaliyot.

FormData'ni aylanib chiqish

FormData iteratsiyalanadi — barcha maydonlarni ko'rib chiqish mumkin:

let formData = new FormData();
formData.append('name', 'Ali');
formData.append('age', '25');

for (let [key, value] of formData) {
  console.log(key + ' = ' + value);
}
// name = Ali
// age = 25

To'liq amaliy misol: forma yuborish

Formani submit qilib, sahifani qayta yuklamasdan serverga yuborishning to'liq namunasi:

let form = document.getElementById('registerForm');

form.addEventListener('submit', async function (event) {
  event.preventDefault(); // sahifa qayta yuklanmasin

  try {
    let formData = new FormData(form);

    let response = await fetch('/register', {
      method: 'POST',
      body: formData
    });

    if (!response.ok) {
      throw new Error('Xatolik: ' + response.status);
    }

    let result = await response.json();
    console.log('Muvaffaqiyat: ', result);

  } catch (error) {
    console.log('Yuborishda xatolik: ' + error.message);
  }
});

Xulosa