JavaScript'te FormData Nesnesi nedir?

FormData nesneleri, bir formu başka bir yöntemle alarak gönderirken formu yakalamak için kullanılır. Yöntemlerle alan eklemek için yeni veya en son FormData HTML formunu oluşturabilir veya herhangi bir form kullanmadan bir nesne oluşturabiliriz. Gönder düğmesine tıklandığında metin alanlarındaki veriler sağlanmalı ve JavaScript bunları tanımlamalı ve bu değişken değerleri iletmelidir.

Bu yazı, JavaScript'teki FormData Nesnesini en kolay örneklerin yardımıyla gösterecektir.

JavaScript'te FormData Nesnesi nedir?

Bir FormData nesnesi, ' kullanılarak sunucuya gönderilebilen JavaScript'te bir veri koleksiyonu oluşturmaya yönelik popüler bir yaklaşımdır. XMLHttp İsteği ” veya alındı. HTML form öğesiyle aynı işlevleri yerine getirir. Bir dizi diziyle karşılaştırılabilir. Ayrı bir dizi, sunucuya iletmek istediğimiz her öğeyi temsil eder.

Sözdizimi

FormData nesnesini JavaScript'te kullanmak için aşağıdaki söz dizimini kullanın:

sabit formData = yeni FormData ( ) ;

Örnek 1: HTML Formu Olmadan FormData Nesnesi Oluşturma

Her şeyden önce, belirli bir ada sahip bir sabiti başlatın ve bu sabite belirli bir değer atayın. Burada, “ new FormData() ” sabit bir değer olarak kullanılır:

sabit formData = yeni FormData ( ) ;

Ardından, ' içindeki argümanları ileterek verileri ekleyin. ekle() ' yöntem

formData. eklemek ( 'İsim' , 'Subay' ) ;

formData. eklemek ( 'İsim' , 'Javed' ) ;

formData. eklemek ( 'yaş' , 25 ) ;

Bundan sonra, “ konsol.log() ' yöntem:

konsol. kayıt ( 'Form Bilgileri' ) ;

Kullan ' için ” yardımıyla konsolda çıktıyı yinelemek ve görüntülemek için döngü ” konsol.log() ' yöntem:

için ( let obj of formData ) {

konsol. kayıt ( nesne ) ;

}

Örnek 2: Bir HTML Formu ile FormData Nesnesi Oluşturma

FormData'yı bir HTML formuyla eklemek için, önce “ yardımıyla HTML'de bir form oluşturun. ” öğesini seçin ve aşağıda listelenen aşağıdaki özniteliği ekleyin:

Forma giriş alanı eklemek için “ ” öğesi.
Giriş etiketinin içinde ' tip ” özniteliği, öğenin veri türünü tanımlar. Bu öznitelik için birden çok olası değer vardır, örneğin ' metin ”, “ sayı ”, “ tarih ”, “ şifre ', ve daha fazlası.
“ Yer tutucu ”, giriş alanında görüntülenecek değeri eklemek için kullanılır ve “name”, giriş alanının adını ifade eder.
“ tıklamada ” olayı, kullanıcı fareye tıklayarak bir işlev gerçekleştirdiğinde tetiklenir:

< form kimliği = 'biçim' >

< giriş tipi = 'metin' isim = 'İsim' Yer tutucu = 'İlk adınızı girin' > 

< giriş tipi = 'metin' isim = 'İsim' Yer tutucu = 'Soyadınızı giriniz' > 

< giriş tipi = 'tarih' isim = 'yaş' Yer tutucu = 'Yaşınızı girin' > 

< giriş tipi = 'düğme' değer = 'Girmek' tıklamada = 'veri()' >

biçim >

Ardından, CSS'de forma erişin ve formun etrafındaki boşluğu ayarlayın:

. biçim {

marj : 20 piksel ;

dolgu malzemesi : 30 piksel ;

}

Ayrıca, script etiketini kullanın ve aşağıdaki kodu ekleyin:

işlev verileri ( ) {
formdu = belge. getElementById ( 'biçim' ) ;
constformData = yeniFormVerileri ( biçim ) ;
konsol. kayıt ( 'Form verisi' ) ;
için ( obj offormData'ya izin ver ) {
konsol. kayıt ( nesne ) ;
}
}

Yukarıdaki kod parçacığında:

“ getElementById(“form”) Form kimliğini kullanarak forma erişmek için ” yöntemi.
Şimdi, erişilen öğeyi yeni bir sabitte saklayın ' formData ”.
Kullan ' için ” yineleme için döngü ve konsoldaki öğeleri yazdırın.

Çıktı

JavaScript'te FormData nesnesinin oluşturulmasını öğrendiniz.

Çözüm

JavaScript'te sunucuya gönderilebilen bir veri koleksiyonu oluşturmak için bir FormData nesnesi kullanılır. JavaScript'te Formdata nesnesini oluşturmak için iki yöntem gösterilmiştir. Birincisi basit JavaScript kullanmak, ikincisi ise HTML'de form oluşturmak ve onu JavaScript ile bağlamaktır. Bu gönderi, JavaScript'teki FormData nesneleri hakkında belirtildi.

JavaScript'te FormData Nesnesi nedir?