Werk met FormData in JavaScript

Kom ons sê ons het 'n sekere vorm:

<form action="/target/" method="POST">
	<input name="test1" value="123">
	<input name="test2" value="456">
	<input type="submit">
</form>

Kom ons sê ons wil die data van hierdie vorm kry in die vorm van sleutel-waarde pare. Dit is duidelijk dat ons vir dit 'n lus sal moet loop en daarin die verlangde resultaat moet vorm. In JavaScript, is daar eger 'n makliker manier - jy kan die spesiale objek FormData gebruik, wat dit moontlik maak om die vormdata op 'n geordende manier te verkry.

Kom ons kyk na hoe om met hierdie objek te werk. Laat ons eers 'n verwysing na ons vorm kry:

let form = document.querySelector('form');

Nou skep ons die objek met ons vorm:

let formData = new FormData(form);

Ons kan ons objek in die konsole vertoon, maar met so 'n vertoon sal ons nie die vormdata sien nie:

console.log(formData);

Laat ons ons objek in 'n skikking omskep om die vormdata te sien:

console.log(Array.from(formData));

Daar word 'n vorm met drie invoervelde gegee. Daar is ook 'n knoppie. Met 'n klik op die knoppie, verkry die data van die vorm in die vorm van 'n FormData-objek.