FormData JavaScript මගින් AJAX හරහා පෝරමය යැවීම

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 ක්‍රමය භාවිතයෙන් මෙම පෝරමය සර්වරයට යවන්න. සර්වරය ඇතුළත් කරන ලද අංකවල ගණිතමය මධ්‍යන්‍යය සොයා ගෙන ප්‍රතිඵලය බ්‍රවුසරය වෙත ආපසු යවන්න.