JavaScript Academy · Oppitunti

FormData-objekti

Rakentakaa lomakkeista multipart-hyötykuormia.

Oppitunti 1/413 vaihetta

FormData-objekti on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mikä FormData on

FormData on selainrajapinta avain-arvoparien muodostamiseen. Parit edustavat lomakekenttiä ja niiden arvoja. Se on vakiintunut tapa paketoida palvelimelle lähetettävät tiedot, myös tiedostot.

Se koodataan muodossa multipart/form-data, joka tukee binaaritiedostojen lähettämistä.

Tyhjän FormDatan luominen

Luokaa tyhjä FormData ja lisätkää kentät yksi kerrallaan append-metodilla.

const data = new FormData();
data.append('username', 'ada');
data.append('email', 'ada@example.com');

console.log(data.get('username'));

FormData-elementin muodostaminen lomake-elementistä

Välittäkää konstruktorille <form>-elementti, jolloin kaikki nimetyt syötekentät kerätään automaattisesti. Tämä on yleisin käyttötapa.

const form = document.querySelector('#signup');
const data = new FormData(form);

for (const [key, value] of data.entries()) {
  console.log(key, value);
}

append ja set

append lisää arvon, vaikka avain olisi jo olemassa, joten yhdellä avaimella voi olla useita arvoja. set korvaa kaikki kyseisen avaimen aiemmat arvot.

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'));

Arvojen lukeminen

get palauttaa avaimen ensimmäisen arvon, getAll palauttaa kaikki arvot taulukkona ja has tarkistaa, onko avain olemassa.

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'));

Kenttien poistaminen

delete poistaa kaikki tietyn avaimen arvot. Tämä on hyödyllistä, kun kenttiä poistetaan ennen lähettämistä.

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'));

Tietueiden läpikäynti

FormData on iteroitava. Voitte käydä kaikki avain-arvoparit läpi käyttämällä entries-, keys- tai values-metodia tai for...of-silmukkaa.

const data = new FormData();
data.append('a', '1');
data.append('b', '2');

for (const key of data.keys()) {
  console.log('field: ' + key);
}

Tiedostojen lisääminen

append voi ottaa arvoksi File- tai Blob-objektin. Valinnaisella kolmannella argumentilla määritetään palvelimelle lähetettävä tiedostonimi.

const fileInput = document.querySelector('#avatar');
const data = new FormData();
data.append('avatar', fileInput.files[0], 'profile.png');

console.log(data.get('avatar').name);

Miksi multipart/form-data

FormData serialisoidaan muodossa multipart/form-data. Se voi sisältää sekä tekstikenttiä että binaarista tiedostosisältöä samassa pyynnön rungossa. Siksi se on ensisijainen muoto tiedostojen lähettämiseen.

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'));

Muuntaminen objektiksi

Yksinkertaisissa, vain tekstiä sisältävissä lomakkeissa Object.fromEntries voi muuntaa FormDatan tavalliseksi objektiksi. Huomioikaa, että toistuvasta avaimesta säilyy vain yksi arvo.

const form = document.querySelector('#login');
const data = new FormData(form);
const plain = Object.fromEntries(data.entries());

console.log(plain);

Miksi FormData on tärkeä

FormData yhdistää HTML-lomakkeet verkkopyyntöihin. Se kerää kentät ja tiedostot, tukee toistuvia avaimia ja koodaa binaarisisällön turvallisesti. Seuraavaksi luette tiedostojen sisältöä FileReader-objektilla ja lähetätte sitten FormDatan fetch-kutsulla.

const form = document.querySelector('#contact');
const data = new FormData(form);
data.append('source', 'web');

console.log([...data.keys()]);

Pikainen tarkistus

Miten append ja set eroavat toisistaan FormDatassa?

Vastaa interaktiivisessa oppitunnissa

Kertaus: FormData-objekti

Opitte paketoimaan lomaketietoja:

new FormData(form) kerää nimetyt syötekentät automaattisesti.
append sallii toistuvat avaimet, kun taas set korvaa ne.
Lukemiseen käytetään metodeja get, getAll ja has; läpikäyntiin käytetään metodia entries.
Tiedot koodataan muodossa multipart/form-data, joka tukee tiedostoja ja binaarisisältöä.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”FormData-objekti” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “FormData-objekti”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”FormData-objekti”?

Rakentakaa lomakkeista multipart-hyötykuormia. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”FormData-objekti”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy