Mikä on FormData-objekti JavaScriptissä?

FormData-objekteja käytetään lomakkeen kaappaamiseen, kun lomake lähetetään noutamalla se toisella menetelmällä. Kenttien lisäämiseksi menetelmillä voimme joko rakentaa uuden tai uusimman FormData HTML -lomakkeen tai tehdä objektin käyttämättä lomakkeita. Tekstikenttien tiedot on annettava, kun lähetä-painiketta napsautetaan, ja JavaScriptin on tunnistettava ne ja toimitettava nämä muuttujien arvot.

Tämä kirjoitus esittelee FormData-objektin JavaScriptissä helpoimpien esimerkkien avulla.

Mikä on FormData-objekti JavaScriptissä?

FormData-objekti on suosittu tapa luoda tietokokoelma JavaScriptillä, joka voidaan lähettää palvelimelle käyttämällä ' XMLHttpRequest ' tai haettu. Se suorittaa samat toiminnot kuin HTML-lomakeelementti. Sitä voidaan verrata joukkoon taulukoita. Erillinen taulukko edustaa jokaista elementtiä, jonka haluamme lähettää palvelimelle.

Syntaksi

Voit käyttää FormData-objektia JavaScriptissä käyttämällä seuraavaa syntaksia:

konst formData = Uusi FormData ( ) ;

Esimerkki 1: Luo FormData-objekti ilman HTML-lomaketta

Ensinnäkin, alusta vakio tietyllä nimellä ja anna sille tietty arvo. Täällä ' new FormData() ' käytetään vakioarvona:

Const formData = Uusi FormData ( ) ;

Liitä seuraavaksi tiedot välittämällä argumentit ' liitä() ”menetelmä

formData. liittää ( 'Fname' , 'upseeri' ) ;

formData. liittää ( 'Lname' , 'Javed' ) ;

formData. liittää ( 'ikä' , 25 ) ;

Käytä sen jälkeen ' console.log() 'menetelmä:

konsoli. Hirsi ( 'Lomaketiedot' ) ;

Käytä ' varten ' silmukka iteroidakseen ja näyttääkseen tulosteen konsolissa '' console.log() 'menetelmä:

varten ( anna obj of formData ) {

konsoli. Hirsi ( obj ) ;

}

Esimerkki 2: Luo FormData-objekti HTML-lomakkeella

Jos haluat lisätä FormDatan HTML-lomakkeella, luo ensin lomake HTML-kielellä ' ” -elementti ja lisää seuraava alla lueteltu attribuutti:

Jos haluat lisätä syöttökentän lomakkeeseen, käytä ' ”elementtiä.
Määritä syöttötunnisteen sisällä ' tyyppi ” -attribuutti määrittääksesi elementin tietotyypin. Tälle määritteelle on useita mahdollisia arvoja, mukaan lukien ' teksti ”, “ määrä ”, “ Päivämäärä ”, “ Salasana ', ja paljon muuta.
' paikanpitäjä ' käytetään lisäämään syöttökenttään näytettävä arvo, ja 'nimi' viittaa syöttökentän nimeen.
' klikkaamalla ”tapahtuma käynnistyy, kun käyttäjä suorittaa toiminnon napsauttamalla hiirtä:

< lomakkeen tunnus = 'lomake' >

< syötteen tyyppi = 'teksti' nimi = 'Fname' paikanpitäjä = 'Anna etunimesi' > 

< syötteen tyyppi = 'teksti' nimi = 'Lname' paikanpitäjä = 'Anna sukunimesi' > 

< syötteen tyyppi = 'Päivämäärä' nimi = 'ikä' paikanpitäjä = 'Anna ikäsi' > 

< syötteen tyyppi = 'painike' arvo = 'Tulla sisään' klikkaamalla = 'data()' >

muodossa >

Siirry seuraavaksi lomakkeeseen CSS:ssä ja aseta välilyönti lomakkeen ympärille:

. muodossa {

marginaali : 20px ;

pehmuste : 30 kuvapistettä ;

}

Käytä lisäksi komentosarjatunnistetta ja lisää seuraava koodi:

toimintotiedot ( ) {
oli muotoa = asiakirja. getElementById ( 'lomake' ) ;
constformData = newFormData ( muodossa ) ;
konsoli. Hirsi ( 'Lomaketiedot' ) ;
varten ( anna obj offormData ) {
konsoli. Hirsi ( obj ) ;
}
}

Yllä olevassa koodinpätkässä:

Kutsu ' getElementById('lomake') ” -menetelmä lomakkeen käyttämiseen käyttämällä lomaketunnusta.
Tallenna nyt käytetty elementti uuteen vakioon ' formData ”.
Käytä ' varten ” silmukka iterointia varten ja tulosta konsolin elementit.

Lähtö

Olet oppinut FormData-objektin luomisesta JavaScriptissä.

Johtopäätös

FormData-objektia käytetään JavaScriptin datakokoelman rakentamiseen, joka voidaan lähettää palvelimelle. Formdata-objektin luomiseksi JavaScriptissä on kaksi tapaa. Ensimmäinen käyttää yksinkertaista JavaScriptiä ja toinen on luomalla lomakkeita HTML-kielellä ja linkittämällä se JavaScriptiin. Tämä viesti kertoi FormData-objekteista JavaScriptissä.

Mikä on FormData-objekti JavaScriptissä?