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

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

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

public/index.html<form action="" method="GET">
  <input name="num1">
  <input name="num2">
  <input type="submit">
</form>

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

public/client.jslet form = document.querySelector('form');

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

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

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

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