JavaScript တွင် AJAX မှတဆင့် POST တောင်းဆိုချက်များ ပို့ခြင်း

ယခု ဆာဗာဆီသို့ POST တောင်းဆိုချက်တစ်ခု ပို့ကြပါစို့။ ထိုသို့လုပ်ဆောင်ရန် fetch လုပ်ဆောင်ချက်တွင် ဒုတိယပါရာမီတာအဖြစ် ပြင်ဆင်သတ်မှတ်ချက်များ ပါရှိသည်။ method ပြင်ဆင်သတ်မှတ်ချက်တွင် HTTP တောင်းဆိုချက်၏ မက်သဒ်ကို သတ်မှတ်ပေးရမည်။ POST မက်သဒ်ကို အောက်ပါအတိုင်း သတ်မှတ်ပါ။

button.addEventListener('click', function() {
	let promise = fetch('/handler/', {
		method: 'post',
	});
});

ထို့အပြင် ကျွန်ုပ်တို့ ဆာဗာဆီသို့ ပို့လိုသည့် ဒေတာများကိုလည်း သတ်မှတ်ကြပါစို့။ POST တောင်းဆိုချက်များတွင် ဒေတာများကို HTTP တောင်းဆိုချက်၏ ကိုယ်ထည်အတွင်း တင်ပို့သည်။ ထိုသို့လုပ်ဆောင်ရန် body ပြင်ဆင်သတ်မှတ်ချက်အတွင်း ဒေတာများကို သတ်မှတ်ပေးရမည်။ Query String ပုံစံဖြင့် သတ်မှတ်ကာ ၎င်းတို့၏ အမျိုးအစားကို သက်ဆိုင်ရာ MIME အဖြစ် သတ်မှတ်ပါ။

button.addEventListener('click', function() {
	let promise = fetch('/handler/', {
		method: 'post',
		body: 'num1=1&num2=2',
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded',
		},
	});
});

ယခု ဤဒေတာများကို ဆာဗာပေါ်တွင် လက်ခံရရှိပြီး တစ်ခုခုလုပ်ဆောင်ကာ ၎င်းတို့ကို ပြန်လည်ပို့ပေးပါမည်။

export default {
	'/handler/': function({ post }) {
		return Number(post.num1) + Number(post.num2);
	}
}

ကလိုင်းယင့်ဘက်တွင် div တစ်ခုနှင့် ခလုတ်တစ်ခု ရှိသည်။ ခလုတ်ကို နှိပ်လိုက်သည့်အခါ နံပါတ်သုံးလုံးကို POST မက်သဒ်ဖြင့် ဆာဗာဆီသို့ ပို့ပါ။ ပို့လိုက်သည့် နံပါတ်များ၏ ပေါင်းလဒ်ကို ဆာဗာက ရှာဖွေစေပါ။ ရလဒ်ကို div အတွင်း ရေးထည့်ပါ။