JavaScript တွင် FormData ဖြင့် အလုပ်လုပ်ခြင်း

ကျွန်ုပ်တို့တွင် ဖောင်တစ်ခုရှိသည်ဆိုပါစို့။

<form action="/target/" method="POST">
	<input name="test1" value="123">
	<input name="test2" value="456">
	<input type="submit">
</form>

ဤဖောင်မှဒေတာများကို key-value စုံလင်ကွက်အဖြစ် ရယူလိုသည်ဆိုပါစို့။ ထိုသို့လုပ်ဆောင်ရန် loop တစ်ခုကို လည်ပတ်ပြီး ၎င်းအတွင်းတွင် လိုချင်သောပုံစံဖော်ရမည်မှာ ရှင်းနေပါသည်။ သို့သော် JavaScript တွင် ပိုမိုလွယ်ကူသောနည်းလမ်းရှိပါသည် - ဖောင်ဒေတာများကို စနစ်တကျရယူနိုင်စေမည့် အထူး object FormData ကို အသုံးပြုနိုင်ပါသည်။

ဤ object ဖြင့်အလုပ်လုပ်ပုံကို ဖြေရှင်းကြည့်ရအောင်။ ပထမဦးစွာ ကျွန်ုပ်တို့၏ဖောင်သို့ ရည်ညွှန်းချက်ရယူကြမည်။

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

ယခု ကျွန်ုပ်တို့၏ဖောင်ဖြင့် object တစ်ခုကိုဖန်တီးကြမည်။

let formData = new FormData(form);

ကျွန်ုပ်တို့၏ object ကို console တွင်ထုတ်ပြနိုင်သော်လည်း �ိုသို့ထုတ်ပြသည့်အခါ ဖောင်ဒေတာများကိုမမြင်ရပါ။

console.log(formData);

ဖောင်ဒေတာများကိုမြင်တွေ့နိုင်ရန် ကျွန်ုပ်တို့၏ object ကို array အဖြစ်ပြောင်းလဲကြမည်။

console.log(Array.from(formData));

input သုံးခုပါသော ဖောင်တစ်ခုနှင့် ခလုတ်တစ်ခုပေးထားသည်။ ခလုတ်ကိုနှိပ်သည့်အခါ FormData object ပုံစံဖြင့် ဖောင်ဒေတာများကိုရယူပါ။