Ֆորմայի ուղարկում AJAX-ի միջոցով FormData JavaScript-ի օգնությամբ

FormData-ի օգնությամբ կարելի է ավտոմատ կերպով ուղարկել ֆորմայի բոլոր դաշտերը սերվեր: Եկեք տեսնենք, թե ինչպես է դա արվում:

Ենթադրենք ունենք հետևյալ ֆորման, որի ինպուտներին տրված են name ատրիբուտները:

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

Եկեք ուղարկենք այս ֆորման AJAX-ի միջոցով: Սկզբում ստացենք ֆորմայի հղումը փոփոխականի մեջ:

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

Այժմ հարցման մարմնում որպես տվյալներ նշենք FormData օբյեկտը: Իսկ հենց օբյեկտին պարամետրով փոխանցենք ֆորմայի հղումը:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // փոխանցում ենք ֆորմայի հղումը
	});
	
	event.preventDefault();
});

Արդյունքում սերվերում մենք կկարողանանք ստանալ ինպուտների արժեքները ըստ նրանց անունների name ատրիբուտներից:

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

Տրված է հինգ ինպուտներով ֆորմա, որոնց մեջ մուտքագրվում են թվեր: Ուղարկեք այս ֆորման սերվեր POST մեթոդով: Թող սերվերը գտնի մուտքագրված թվերի միջին թվաբանականը և արդյունքը ուղարկի դեպի բրաուզեր: