FormData JavaScript ulanyp, AJAX arkaly formany ibermek

FormData ýardymynda formanyň ähli meýdanlaryny awtomatik ýagdaýda serwere iberip bolýar. Bunyň nähili edilýändigine göz aýlalyň.

Aşakdaky forma biziň bolsun, ýagny inputlara name atlary berlen:

<form action="" method="GET">
	<input name="num1">
	<input name="num2">
	<input type="submit">
</form>

Geliň bu formany AJAX arkaly ibereliň. Ilki bilen, forma çykgydyny üýtgeýjä alalyň:

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

Indi sorag jisminde maglumat hökmünde FormData obyktini görkezeliň. Obyktiň özüne bolsa, parametr hökmünde forma çykgydyny ibereliň:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // forma çykgydyny iberýäris
	});
	
	event.preventDefault();
});

Netijede, serwerde inputlaryň bahalaryny olaryň name atributlaryndaky atlar boýunça alyp bileris:

export default {
	'/handler/': function({post}) {
		console.log(post.num1);
		console.log(post.num2);
		return 'form data received';
	}
}

Sanda girizilýän bäş inputly forma berlen. Bu formany POST usuly bilen serwere iberiň. Serwer girizilen sanlaryň ortaça arifmetigini tapsyn we netijeni brauzere yzyna ibersin.