JavaScript တွင် ဖောင်များ ပေးပို့ခြင်း

JavaScript တွင် ဘရောက်ဇာထဲတွင် လုပ်ဆောင်နေခြင်းအားဖြင့် ဖောင် အစိတ်အပိုင်းများနှင့် အလုပ်လုပ်နည်းကို သင် သင်ယူပြီးဖြစ်ပါသည်။ သို့သော် PHP သို့မဟုတ် NodeJS ဖြင့် ရေးသားထားသည့် ဝဘ်ဆိုက်၏ ဆာဗာအပိုင်းက လုပ်ဆောင်နိုင်ရန်အတွက် ဖောင်များကို ဆာဗာသို့လည်း ပေးပို့နိုင်ပါသည်။

ဆာဗာပေါ်တွင် သိမ်းဆည်းထားသော ဝဘ်ဆိုက်ဒေတာများကို ထည့်သွင်းရန်နှင့် ပြောင်းလဲရန်အတွက် ဤသို့လုပ်ဆောင်ရန် လိုအပ်ပါသည်။

ဤသို့ မည်သို့လုပ်ဆောင်သည်ကို ကြည့်ရအောင်။ ကျွန်ုပ်တို့တွင် input တစ်ချို့နှင့် ခလုတ်တစ်ခု ရှိသည်ဆိုပါစို့။

html<input>
<input>
<input type="submit">

ကျွန်ုပ်တို့၏ အစိတ်အပိုင်းများကို form tag ဖြင့် ထည့်သွင်းလိုက်ပါ။ �သို့ဖြင့် ခလုတ်ကို နှိပ်လိုက်သည်နှင့် ဆာဗာသို့ ပေးပို့မည့် ဖောင် တစ်ခု ကျွန်ုပ်တို့ရရှိသွားပါမည်။

html<form>
  <input>
  <input>
  <input type="submit">
</form>

ဆာဗာပေါ်တွင် ဖောင်ဒေတာများကို ရယူနိုင်ရန်အတွက် input တစ်ခုစီကို ၎င်း၏ကိုယ်ပိုင် အမည် ပေးရန် လိုအပ်ပါသည်။

html<form>
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

ဤသို့ဖြစ်လျှင် ဆာဗာသို့ ဖောင်ဒေတာများသည် key-value အတွဲများအဖြစ် ရောက်ရှိလာမည်ဖြစ်ပြီး၊ key များသည် ဖောင် အစိတ်အပိုင်းများ၏ အမည်များဖြစ်ကာ value များသည် ရိုက်ထည့်ထားသော ဒေတာများ ဖြစ်ပါသည်။

ဖောင်ကို ပေးပို့ရန်အတွက် ဆာဗာ လိုအပ်ခြင်း မရှိပါ။ သင်သည် ဖောင်ကုဒ်ကို မည်သည့်ဖိုင်တွင်မဆို ကူးယူထည့်၍ ဘရောက်ဇာထဲတွင် ဖွင့်ပြီး ပေးပို့ခလုတ်ကို နှိပ်နိုင်သည် - ဖောင် ပေးပို့သွားပြီး ဘရောက်ဇာ စာမျက်နှာ ပြန်လည် စတင်လာပါမည်။

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

ကျွန်ုပ်တို့၏ ဖောင်ကို လိပ်စာ http://localhost:3001/form.html တွင် ရရှိနိုင်စေရန် ဖိုင်တစ်ခုထဲတွင် ထားရှိကြပါစို့။

public/form.html<form>
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

ကျွန်ုပ်တို့၏ ဖောင်ထဲသို့ ပေးပို့ရန် လိပ်စာကို ညွှန်ပြသည့် action attribute ကို ထည့်ကြပါမည်။

public/form.html<form action="/handler/">
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

ယခု server.js ဖိုင်ထဲတွင် ဖောင်ပေးပို့ရန် လိပ်စာ၏ လုပ်ဆောင်ချက်ကို ရေးသားကြပါမည်။

server.jsexport default {
  '/handler/': function() {
    return 'form data received';
  }
}

ကျွန်ုပ်တို့၏ လုပ်ဆောင်ချက် parameter ထဲသို့ ပေးပို့ထားသော ဖောင်ဒေတာများ ရောက်ရှိလာပါမည်။

server.jsexport default {
  '/handler/': function(data) {
    console.log(data); // ဆာဗာ console တွင် ပြသပါမည်
    return 'form data received';
  }
}