জাভাস্ক্রিপ্ট jQuery post() রিকোয়েস্ট কীভাবে করবেন

ওয়েব অ্যাপ বানাতে সময় ইউজার ইনপুট থেকে ডেটা সার্ভারে পাঠানো প্রয়োজন হয় (যেমন সাইন-আপ ফর্ম, রেসিপি অ্যাপ)। ডিফল্ট ফর্ম সাবমিট পেজ রিফ্রেশ বা রিডাইরেক্ট করে। jQuery post() ব্যবহার করে AJAX রিকোয়েস্ট করা যায় যাতে পেজ রিফ্রেশ ছাড়া ডেটা পাঠানো এবং রেসপন্স হ্যান্ডল করা যায়।

post() মেথড নোকটা নজরে

$.post('/recipes', data) - এখানে $ হলো jQuery সিলেক্টর, post() মেথড ডেটা সার্ভারে পাঠায়। রেসপন্স হিসেবে jqXHR অবজেক্ট ফিরে আসে যাতে done() মেথড দিয়ে হ্যান্ডল করা যায়।

ব্যবহারিক উদাহরণ

HTML ফর্ম

<form id='new-recipe'>
  <label for="name">Recipe Name</label><br>
  <input type="text" name="name" id="name"><br>
  <label for="ingredients">Ingredients</label><br>
  <input type="text" name="ingredients" id="ingredients"><br>
  <button type="submit">Create Recipe</button>
</form>
<div class="recipes"></div>

জাভাস্ক্রিপ্ট (jQuery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(() => {
  $('#new-recipe').submit((e) => {
    e.preventDefault(); // ডিফল্ট রিডাইরেক্ট বন্ধ
    var values = $(this).serialize(); // ফর্ম ডেটা সিরিয়ালাইজ
    var posting = $.post('/recipes', values); // POST রিকোয়েস্ট
    posting.done((data) => {
      var recipe = data;
      $('.recipes').text(recipe["name"] + " - " + recipe["ingredients"]);
    });
  });
});
</script>

সারাংশ

1. submit ইভেন্টে preventDefault() কল করুন।
2. $(this).serialize() দিয়ে ফর্ম ডেটা URL-এনকোডেড স্ট্রিং বানান।
3. $.post(url, data) দিয়ে পাঠান।
4. রিটার্ন করা jqXHR অবজেক্টে done() দিয়ে রেসপন্স হ্যান্ডল করুন।

এখন আপনি jQuery post() ব্যবহার করে আজাক্স (AJAX) রিকোয়েস্ট করতে পারবেন!