FormData JavaScript ব্যবহার করে AJAX এর মাধ্যমে ফর্ম পাঠানো

FormData ব্যবহার করে সার্ভারে ফর্মের সমস্ত ফিল্ড স্বয়ংক্রিয়ভাবে পাঠানো যায়। আসুন দেখি কিভাবে এটি করা হয়।

ধরুন আমাদের নিম্নলিখিত ফর্মটি আছে, যেখানে ইনপুটগুলিকে name অ্যাট্রিবিউট দেওয়া হয়েছে:

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

আসুন এই ফর্মটি AJAX এর মাধ্যমে পাঠাই। প্রথমে একটি ভেরিয়েবলে ফর্মের রেফারেন্স পাই:

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

এখন রিকোয়েস্ট বডিতে ডেটা হিসাবে FormData অবজেক্ট উল্লেখ করি। এবং অবজেক্টটিকে প্যারামিটার হিসাবে ফর্মের রেফারেন্স পাস করি:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // ফর্মের রেফারেন্স পাস করি
  });
  
  event.preventDefault();
});

ফলস্বরূপ সার্ভারে আমরা name অ্যাট্রিবিউট থেকে তাদের নাম দ্বারা ইনপুটগুলির মান পেতে সক্ষম হব:

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