FormData JavaScript ကို အသုံးပြု၍ AJAX မှတစ်ဆင့် ဖောင်အချက်အလက်များ ပေးပို့ခြင်း

FormData ကိုသုံး၍ ဖောင်အတွင်းရှိ အကွက်အားလုံးကို အလိုအလျောက် ဆာဗာသို့ ပေးပို့နိုင်ပါသည်။ ထိုသို့မည်သို့လုပ်ဆောင်ရမည်ကို ကြည့်ကြပါစို့။

အောက်ပါဖောင်တစ်ခု ကျွန်ုပ်တို့တွင် ရှိသည်ဆိုပါစို့။ ၎င်းအတွက် input များတွင် name attributes များ ပေးထားပါသည်။

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

ဤဖောင်ကို AJAX မှတစ်ဆင့် ပေးပို့ကြပါစို့။ ဦးစွာ ဖောင်ကို variable တစ်ခုအတွင်း ရည်ညွှန်းရယူပါမည်။

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

ယခု request body အတွင်း အချက်အလက်အဖြစ် FormData object ကို ဖော်ပြပါမည်။ ၎င်း object ကို parameter အဖြစ် ဖောင်၏ ရည်ညွှန်းချက်ကို ပေးပို့ပါမည်။

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // ဖောင်၏ ရည်ညွှန်းချက်ကို ပေးပို့ပါသည်
	});
	
	event.preventDefault();
});

ရလဒ်အနေဖြင့် ဆာဗာတွင် ကျွန်ုပ်တို့သည် input များ၏တန်ဖိုးများကို ၎င်းတို့၏ name attributes များမှ အမည်ဖြင့် ရယူနိုင်ပါမည်။

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

နံပါတ်များ ထည့်သွင်းရန် input ငါးခုပါသော ဖောင်တစ်ခု ရှိပါသည်။ ဤဖောင်ကို POST method ဖြင့် ဆာဗာသို့ ပေးပို့ပါ။ ဆာဗာသည် ထည့်သွင်းထားသော နံပါတ်များ၏ ပျမ်းမျှတန်ဖိုးကို တွက်ချက်၍ ရလဒ်ကို browser သို့ ပြန်လည်ပေးပို့ပါစေ။