Apakah Objek FormData dalam JavaScript?

Objek FormData digunakan untuk menangkap borang semasa menyerahkan borang dengan mendapatkannya semula dengan kaedah lain. Untuk menambah medan dengan kaedah, kita boleh sama ada membina borang HTML FormData baharu atau terkini atau membuat objek tanpa menggunakan sebarang bentuk. Data dalam medan teks mesti disediakan apabila butang serah diklik dan JavaScript mesti mengenal pastinya dan menyampaikan nilai pembolehubah tersebut.

Tulisan ini akan menunjukkan Objek FormData dalam JavaScript dengan bantuan contoh yang paling mudah.

Apakah Objek FormData dalam JavaScript?

Objek FormData ialah pendekatan popular untuk membina pengumpulan data dalam JavaScript yang boleh dihantar ke pelayan menggunakan ' XMLHttpRequest ” atau diambil semula. Ia melaksanakan fungsi yang sama seperti elemen bentuk HTML. Ia boleh dibandingkan dengan pelbagai tatasusunan. Tatasusunan berasingan mewakili setiap elemen yang ingin kami hantar ke pelayan.

Sintaks

Untuk menggunakan objek FormData dalam JavaScript, gunakan sintaks berikut:

const formData = baru FormData ( ) ;

Contoh 1: Cipta Objek FormData Tanpa Borang HTML

Pertama sekali, mulakan pemalar dengan nama tertentu dan tetapkan nilai tertentu kepada pemalar itu. Di sini, ' FormData() baharu ” digunakan sebagai nilai tetap:

Const formData = baru FormData ( ) ;

Seterusnya, tambahkan data dengan menghantar argumen dalam ' tambah() ” kaedah

formData. tambahkan ( 'Fname' , 'Pegawai' ) ;

formData. tambahkan ( 'Lname' , 'Javed' ) ;

formData. tambahkan ( 'umur' , 25 ) ;

Selepas itu, gunakan ' console.log() ' kaedah:

konsol. log ( 'Maklumat Borang' ) ;

Menggunakan ' untuk ' gelung untuk mengulang dan memaparkan output pada konsol dengan bantuan ' console.log() ' kaedah:

untuk ( biarkan obj daripada formData ) {

konsol. log ( obj ) ;

}

Contoh 2: Cipta Objek FormData Dengan Borang HTML

Untuk menambah FormData dengan borang HTML, pertama, buat borang dalam HTML dengan bantuan ' ” dan tambahkan atribut berikut yang disenaraikan di bawah:

Untuk menambah medan input dalam borang, gunakan “ ” unsur.
Di dalam teg input, nyatakan “ menaip ” atribut untuk menentukan jenis data elemen. Terdapat berbilang nilai yang mungkin untuk atribut ini, termasuk ' teks ”, “ nombor ”, “ Tarikh ”, “ kata laluan ', dan banyak lagi.
' pemegang tempat ” digunakan untuk menambah nilai untuk dipaparkan pada medan input, dan “nama” merujuk kepada nama medan input.
“ onclick ” peristiwa akan dicetuskan apabila pengguna melakukan fungsi dengan mengklik pada tetikus:

< id borang = 'bentuk' >

< jenis input = 'teks' nama = 'Fname' pemegang tempat = 'Masukkan Nama Pertama Anda' > 

< jenis input = 'teks' nama = 'Lname' pemegang tempat = 'Masukkan Nama Keluarga Anda' > 

< jenis input = 'Tarikh' nama = 'umur' pemegang tempat = 'Masukkan Umur Anda' > 

< jenis input = 'butang' nilai = 'Masuk' onclick = 'data()' >

bentuk >

Seterusnya, akses borang dalam CSS dan tetapkan ruang di sekeliling borang:

. bentuk {

margin : 20px ;

padding : 30px ;

}

Selain itu, gunakan teg skrip dan tambah kod berikut:

data fungsi ( ) {
adalah bentuk = dokumen. getElementById ( 'bentuk' ) ;
constformData = newFormData ( bentuk ) ;
konsol. log ( 'Data Borang' ) ;
untuk ( biarkan obj offormData ) {
konsol. log ( obj ) ;
}
}

Dalam coretan kod di atas:

Serlahkan ' getElementById('borang') ” kaedah untuk mengakses borang dengan menggunakan id borang.
Sekarang, simpan elemen yang diakses ke dalam pemalar baharu “ formData ”.
Menggunakan ' untuk ” gelung untuk lelaran dan mencetak elemen pada konsol.

Pengeluaran

Anda telah mempelajari tentang penciptaan objek FormData dalam JavaScript.

Kesimpulan

Objek FormData digunakan untuk membina koleksi data dalam JavaScript yang boleh dihantar ke pelayan. Untuk mencipta objek Formdata dalam JavaScript, dua kaedah ditunjukkan. Yang pertama menggunakan JavaScript mudah dan yang kedua adalah melalui penciptaan borang dalam HTML dan menghubungkannya dengan JavaScript. Catatan ini menyatakan tentang objek FormData dalam JavaScript.

Apakah Objek FormData dalam JavaScript?