জাভাস্ক্রিপ্টে ফর্ম পাঠানো

আপনি ইতিমধ্যেই জাভাস্ক্রিপ্টে ফর্ম উপাদানগুলির সাথে কাজ করতে শিখেছেন, সেগুলিকে ব্রাউজারে প্রক্রিয়া করে। যাইহোক, ফর্মগুলিকে সার্ভারেও পাঠানো যেতে পারে যাতে সাইটের সার্ভার সাইড দ্বারা সেগুলি প্রক্রিয়া করা যায়, যা PHP বা NodeJS-এ লেখা থাকে।

এটি প্রয়োজন সার্ভারে সংরক্ষিত সাইটের ডেটা যোগ এবং পরিবর্তন করার জন্য।

চলুন দেখি, এটি কীভাবে করা হয়। ধরা যাক আমাদের কয়েকটি ইনপুট এবং একটি বাটন আছে:

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

আসুন আমাদের উপাদানগুলিকে একটি form ট্যাগের মধ্যে আবদ্ধ করি। এই ক্ষেত্রে, আমাদের একটি ফর্ম হবে যা বাটনে ক্লিক করলে সার্ভারে পাঠানো হবে:

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

সার্ভারে ফর্মের ডেটা পাওয়ার জন্য, প্রতিটি ইনপুটকে একটি আলাদা নাম দিতে হবে:

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

এই ক্ষেত্রে, সার্ভারে ফর্মের ডেটা আসবে কী-মান জোড়া আকারে, যেখানে কীগুলি হবে ফর্ম উপাদানগুলির নাম, এবং মানগুলি হবে প্রবেশ করা ডেটা।

ফর্মটি পাঠানোর জন্য, সার্ভারের কোনও প্রয়োজন নেই। আপনি ফর্মের প্রদত্ত কোডটি যেকোনো ফাইলে কপি করতে পারেন, ব্রাউজারে চালাতে পারেন এবং প্রেরণ বাটনে ক্লিক করুন - ফর্মটি পাঠানো হবে এবং ব্রাউজার পৃষ্ঠাটি পুনরায় লোড হবে।

যাইহোক, সার্ভার না থাকলে, ফর্মের ডেটা কোথাও পৌঁছাবে না। তাই আসুন একটি সার্ভারের সাথে ফর্মের কাজ পরীক্ষা করি। আপনি এখনও কোনও সার্ভার-সাইড ভাষা জানেন না, তাই আসুন আমাদের শিক্ষামূলক HTTP সার্ভার ব্যবহার করে ফর্ম পাঠানো অনুশীলন করি।

আসুন আমাদের ফর্মটি একটি নির্দিষ্ট ফাইলে রাখি যাতে এটি এই ঠিকানায় অ্যাক্সেসযোগ্য হয় http://localhost:3001/form.html:

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

আসুন আমাদের ফর্মে একটি action অ্যাট্রিবিউট যোগ করি, যা আমাদের ফর্ম পাঠানোর ঠিকানা নির্দেশ করে:

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';
  }
}

আমাদের হ্যান্ডলারের প্যারামিটারে প্রেরিত ফর্ম ডেটা পড়বে:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data); // সার্ভার কনসোলে প্রিন্ট হবে
    return 'form data received';
  }
}