FormData Nesnesi
Formlardan çok parçalı yükler oluşturun.
FormData Nesnesi, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.
FormData Nedir?
FormData, form alanlarını ve bunların değerlerini temsil eden anahtar/değer çiftlerinden oluşan bir küme oluşturmak için kullanılan bir tarayıcı API'sidir. Dosyalar da dâhil olmak üzere verileri sunucuya göndermek üzere paketlemenin standart yoludur.
multipart/form-data olarak kodlanır ve ikili yüklemeleri destekler.
Boş FormData Oluşturma
Boş bir FormData oluşturun ve alanları append ile teker teker ekleyin.
const data = new FormData();
data.append('username', 'ada');
data.append('email', 'ada@example.com');
console.log(data.get('username'));Form Öğesinden Oluşturma
Kurucuya bir <form> öğesi iletin; adlandırılmış her giriş otomatik olarak yakalanır. En yaygın kullanım şekli budur.
const form = document.querySelector('#signup');
const data = new FormData(form);
for (const [key, value] of data.entries()) {
console.log(key, value);
}append ve set karşılaştırması
append, anahtar zaten mevcut olsa bile bir değer ekler ve anahtar başına birden fazla değere izin verir. set ise o anahtara ait mevcut tüm değerleri değiştirir.
const data = new FormData();
data.append('tag', 'a');
data.append('tag', 'b');
console.log(data.getAll('tag'));
data.set('tag', 'only');
console.log(data.getAll('tag'));Değerleri Okuma
get bir anahtarın ilk değerini döndürür, getAll tüm değerleri bir dizi olarak döndürür ve has varlığı denetler.
const data = new FormData();
data.append('color', 'red');
data.append('color', 'blue');
console.log(data.get('color'));
console.log(data.getAll('color'));
console.log(data.has('color'));Alanları Silme
delete, bir anahtara ait tüm değerleri kaldırır. Göndermeden önce alanları ayıklamak için kullanışlıdır.
const data = new FormData();
data.append('keep', '1');
data.append('remove', '2');
data.delete('remove');
console.log(data.has('remove'));
console.log(data.has('keep'));Girdiler Üzerinde Yineleme
FormData üzerinde yineleme yapılabilir. Tüm çiftler üzerinde ilerlemek için entries, keys veya values kullanın ya da bir for...of döngüsü yazın.
const data = new FormData();
data.append('a', '1');
data.append('b', '2');
for (const key of data.keys()) {
console.log('field: ' + key);
}Dosya Ekleme
append, değer olarak bir File veya Blob alabilir. İsteğe bağlı üçüncü bağımsız değişken, sunucuya gönderilecek dosya adını belirler.
const fileInput = document.querySelector('#avatar');
const data = new FormData();
data.append('avatar', fileInput.files[0], 'profile.png');
console.log(data.get('avatar').name);multipart/form-data Neden Kullanılır?
FormData, tek bir istek gövdesinde hem metin alanlarını hem de ikili dosya içeriğini taşıyabilen çok parçalı/form verisi olarak serileştirilir. Dosya yüklemelerinde tercih edilen biçim olmasının nedeni budur.
const data = new FormData();
data.append('title', 'Vacation Photo');
data.append('photo', new Blob(['binary'], { type: 'image/png' }), 'pic.png');
console.log(data.has('photo'));Nesneye Dönüştürme
Yalnızca metin içeren basit formlarda Object.fromEntries, FormData verisini düz bir nesneye dönüştürebilir. Yinelenen bir anahtar için yalnızca bir değerin korunacağını unutmayın.
const form = document.querySelector('#login');
const data = new FormData(form);
const plain = Object.fromEntries(data.entries());
console.log(plain);FormData Neden Önemlidir?
FormData, HTML formları ile ağ istekleri arasındaki köprüdür. Alanları ve dosyaları toplar, yinelenen anahtarları destekler ve ikili verileri güvenli biçimde kodlar. Sırada dosya içeriklerini FileReader ile okuyacak, ardından FormData verisini veri getirme API'siyle göndereceksiniz.
const form = document.querySelector('#contact');
const data = new FormData(form);
data.append('source', 'web');
console.log([...data.keys()]);Kısa Kontrol
Bir FormData üzerinde append ile set arasındaki fark nedir?
Özet: FormData Nesnesi
Form verilerini paketlemeyi öğrendiniz:
new FormData(form), adlandırılmış girişleri otomatik olarak yakalar.appendyinelenen anahtarlara izin verir;setbunların yerine geçer.get,getAllvehasile okuyun;entriesile yineleyin.- Çok parçalı/form verisi olarak kodlanır ve dosyaları ve ikili verileri destekler.
Sıkça Sorulan Sorular
“FormData Nesnesi” dersi ücretsiz mi?
Evet — “FormData Nesnesi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.
“FormData Nesnesi” dersinde ne öğreneceğim?
Formlardan çok parçalı yükler oluşturun. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“FormData Nesnesi” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.