কিভাবে একটি jQuery পোস্ট() অনুরোধ করবেন

একটি ওয়েব অ্যাপ তৈরি করার সময়, এটি অনিবার্য যে ব্যবহারকারীর ইনপুট ডেটা থেকে আমাদের কিছু তৈরি করতে হবে। এটি একটি নতুন ব্যবহারকারী অ্যাকাউন্ট তৈরি করা হতে পারে যখন কেউ একটি সাইন আপ ফর্মের মাধ্যমে তাদের তথ্য জমা দেয়, বা আপনার দুর্দান্ত নতুন রেসিপি সংগঠক অ্যাপ থেকে একটি নতুন রেসিপি তৈরি করে৷ একটি ফর্মে ব্যবহারকারীর ডেটা থেকে আপনার ডাটাবেসে সংরক্ষিত একটি রেসিপির একটি নতুন নতুন উদাহরণে যাওয়ার জন্য একটি HTTP POST প্রয়োজন অনুরোধ

একটি POST অনুরোধ হল যা ফর্ম থেকে সার্ভারে ডেটা পাঠায় যেখানে এটি একটি ব্যাকএন্ড বা API তৈরি করা যায় এবং একটি ডাটাবেসে সংরক্ষণ করা যায়। ডিফল্টরূপে, একটি ফর্ম জমা দেওয়ার জন্য একটি পুনঃনির্দেশ বা পৃষ্ঠা রিফ্রেশ প্রয়োজন৷ যদিও এটি ছোট অ্যাপগুলির জন্য পুরোপুরি ঠিক, আমরা একটি দ্রুত লোডিং অভিজ্ঞতা প্রদান করতে চাই যাতে আমরা এই আচরণটিকে ওভাররাইড করব

jQuery post() ব্যবহার করে অনুরোধ আমাদের HTTP অনুরোধ করতে, একটি প্রতিক্রিয়া ফিরে পেতে, এবং রিডাইরেক্ট বা রিফ্রেশ ছাড়াই আমরা কীভাবে ডেটা প্রদর্শন করব তা চয়ন করতে দেয়! চলুন একটু ঘনিষ্ঠভাবে দেখুন কি post() এই সব করার জন্য প্রয়োজন.

পোস্ট()

HTTP অনুরোধ একটি ধরা খেলার মত. ব্রাউজার API এন্ডপয়েন্টের মাধ্যমে সার্ভারে একটি অনুরোধ ছুঁড়ে দেয় এবং সার্ভার একটি প্রতিক্রিয়া ফিরিয়ে দেয়। পোস্ট() যা করে তা হল এন্ডপয়েন্টে ডেটা পাঠানো যা অ্যাপের ডাটাবেসে তৈরি এবং সংরক্ষণ করা হবে।

উপরের সবগুলো বিবেচনায় নিয়ে, আমরা post() ধরে নিতে পারি কিছু যুক্তি লাগে, তাই না? ঠিক! post() চারটি আর্গুমেন্ট পর্যন্ত লাগে, কিন্তু আমাদের উদ্দেশ্যের জন্য, আমরা প্রধান দুটির উপর ফোকাস করছি:URL গন্তব্য এবং আমরা সেই গন্তব্যে যে ডেটা পাঠাচ্ছি।

$.post(‘/recipes’, data) 


আমাদের রেসিপি সংগঠিত অ্যাপের উদাহরণ নিয়ে, আমরা আমাদের jQuery দিয়ে শুরু করি নির্বাচক $. post() আহ্বান করে পদ্ধতি, আমরা আমাদের ডেটা ‘/recipes.’-এর URL-এ পাঠাচ্ছি এ পর্যন্ত সব ঠিকই. আমরা আমাদের সার্ভারে কিছু ডেটা নিক্ষেপ করেছি। এখন, আমরা প্রতিক্রিয়া ধরতে প্রস্তুত!

প্রতিক্রিয়া হিসাবে আমাদের কাছে যা ফিরে আসে তা হল jQuery XHR নামে পরিচিত বস্তু, অথবা jqXHR , যা প্রতিশ্রুতি ইন্টারফেস বাস্তবায়ন করে। চিন্তার কিছু নেই! যদিও শেষ বাক্যটি ভীতিকর মনে হতে পারে, এটি আমাদের বলছে যে প্রতিক্রিয়াটি কেবল একটি বস্তু। jQuery এর সহজ done() দিয়ে পদ্ধতি, সেই বস্তুটিকে আরও সুস্পষ্ট বিন্যাসে সংগঠিত করা যেতে পারে।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

আমাদের ক্যাচ অ্যানালজির গেমটি বজায় রেখে, আমরা post() দিয়ে সার্ভারে ডেটা নিক্ষেপ করি . আমরা একটি jqXHR পিছনে ফেলে দিচ্ছি অবজেক্ট, যা আমরা done() এ পাস করি তাই আমরা দেখতে পারি যে আমরা কি ধরেছি। এখন যেহেতু আমরা ঘনিষ্ঠভাবে post() পরীক্ষা করেছি , চলুন দেখি কিভাবে ব্যবহার করবেন।

jQuery পোস্ট()

শুরু করার জন্য, আমাদের একটি সাধারণ HTML ফর্ম আছে:

script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<h2>
  New Recipe
</h2>
<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>

যা ফর্মটিকে এইভাবে প্রদর্শন করে:

ডিফল্টরূপে, যখন একটি submit বোতামে ক্লিক করা হলে, ব্রাউজার রিফ্রেশ বা পুনঃনির্দেশিত হবে। মনে রাখবেন আমরা একটি পৃষ্ঠা রিফ্রেশ বা পুনঃনির্দেশ এড়াতে চাই? পৃষ্ঠাটি রিফ্রেশ বা পুনঃনির্দেশিত হলে, আমরা ফর্ম থেকে আমাদের সমস্ত ডেটা হারিয়ে ফেলি। রিডাইরেক্ট করা এবং ডেটা হারানো এড়াতে, আমাদের কাছে JavaScript preventDefault() আছে পদ্ধতি

<script>
  $(document).ready(() => {
    $('#new-recipe').submit((event) => {
      event.preventDefault();
    })
  })

</script>

আমরা পৃষ্ঠা বা document পর্যন্ত অপেক্ষা করছি লোড হয়, তারপর শোনার জন্য সাবমিট বোতামটি new-recipe. এর একটি আইডি সহ ফর্মটিতে ক্লিক করা হয়। এটি .submit() দিয়ে সম্পন্ন হয় পদ্ধতি যা একটি আর্গুমেন্ট হিসাবে ক্লিক ইভেন্ট সহ একটি কলব্যাক ফাংশন নেয়। পর্যালোচনা করার জন্য, একটি জাভাস্ক্রিপ্ট কলব্যাক ফাংশন এমন একটি ফাংশন যা আমরা পরবর্তীতে কার্যকর করার জন্য অন্য ফাংশনে একটি যুক্তি হিসাবে পাস করতে পারি।

এই কলব্যাক ফাংশনের ভিতর থেকে, আমরা preventDefault() দিয়ে ডিফল্ট পুনঃনির্দেশ বন্ধ করতে পারি . এখন, আমরা আর পুনঃনির্দেশ করছি না এবং সার্ভারে কিছু ডেটা জমা দিতে শুরু করতে পারি।

আমরা post() চালু করার আগে ডেটা পাঠাতে, আমাদের ডেটা দরকার! আমরা কোথা থেকে এই তথ্য পেতে পারি?

আমরা ফর্ম থেকে তথ্য পেতে. যেহেতু আমরা আর রিডাইরেক্ট করছি না, তাই ফর্মের টেক্সট ইনপুটগুলির মানগুলিতে আমাদের অ্যাক্সেস আছে। সেই serialize() দিয়ে কি হচ্ছে পদ্ধতি?

serialize() এটি দিয়ে আমরা যে ফর্মটি বেছে নিয়েছি তাতে মেথড বলা হয় কীওয়ার্ড কি serialize() ডস ফর্ম ডেটাকে স্ট্যান্ডার্ড ইউআরএল-এনকোডেড নোটেশনে একটি টেক্সট স্ট্রিং-এ রূপান্তর করে, যা সার্ভারে পাঠানো যেতে পারে।

একবার আমরা আমাদের ফর্ম ডেটা সঠিকভাবে সিরিয়ালাইজ করার পরে, আমরা এটি একটি ভেরিয়েবলে সংরক্ষণ করি:

  $(document).ready(() => {
    $('#new-recipe').submit((event) => {
      event.preventDefault();
     var values = $(this).serialize();
    })
  })

এখন আমাদের ডেটা ভ্যালু ভ্যারিয়েবলে সংরক্ষিত আছে, আমরা এখন এটি সার্ভারে পাঠাতে পারি!

  $(document).ready(() => {
    $('#new-recipe').submit((event) => {
      event.preventDefault();
     var values = $(this).serialize();
     var posting = $.post('/recipes', values);
    })
  })

মনে রাখবেন যে post() jqXHR ফেরত দেয় বস্তু? আমরা এটিকে একটি পরিবর্তনশীল হিসাবেও সংরক্ষণ করতে পারি এবং done() কল করতে পারি এটিতে প্রতিক্রিয়া আনপ্যাক করতে এবং আমরা আমাদের ক্লায়েন্টের পক্ষ থেকে বেছে নেওয়ার মতো এটি মোকাবেলা করতে পারি।

$(document).ready(() => {
    $('#new-recipe').submit((e) => {
      e.preventDefault();
      var values = $(this).serialize();
      var posting = $.post('/recipes', values);
      posting.done( (data) => {
        var recipe = data;
        $('.recipes').text(recipe["name"]);
        $('.recipes').text(recipe["ingredients"]);
      })
    })
  })

ডেটা পাওয়ার পরে এবং recipe এর আরও সুস্পষ্ট ভেরিয়েবলে সংরক্ষণ করার পরে , আমরা নাম এবং উপাদান বৈশিষ্ট্য অ্যাক্সেস করতে পারেন. উদাহরণের জন্য, আমরা একটি <div>-এ এই বৈশিষ্ট্যগুলি সন্নিবেশিত করেছি recipe এর ক্লাস সহ .

উপসংহার

আমরা এখানে অনেক জায়গা কভার করেছি! আমরা post() সম্পর্কে শেখার উদযাপন করার আগে, আসুন আমরা যা শিখেছি তা দ্রুত পুনরুদ্ধার করি।

post() এর জন্য একটি সাধারণ ব্যবহার .submit() এর ভিতরে আছে একটি কলব্যাক ফাংশন হিসাবে। যেহেতু .submit() ফর্মেই বলা হয়, আমরা JavaScript this ব্যবহার করতে পারি ফর্মের সমস্ত ডেটা উল্লেখ করার জন্য কীওয়ার্ড এবং serialize() এটা আমরা একটি ভেরিয়েবলের মধ্যে সিরিয়ালাইজড ডেটা সংরক্ষণ করার পরে, যাকে প্রায়ই মান বলা হয়, আমরা post() ব্যবহার করে এই মানগুলিকে আমাদের গন্তব্য URL-এ পাঠাতে পারি। .

jqXHR সংরক্ষণ করা একটি ভাল অভ্যাস বস্তু post() দ্বারা ফেরত দেওয়া হয়েছে একটি পরিবর্তনশীল মধ্যে যাকে সাধারণত posting বলা হয় . এখান থেকে আমরা handy done() ব্যবহার করি আমাদের পোস্টিং ভেরিয়েবলের মেথড, এবং এখন আমাদের কাছে সেই ডেটাতে অ্যাক্সেস আছে যেটি সার্ভারের দ্বারা প্রতিক্রিয়া জানানো হয়েছে। আপনি কীভাবে আপনার ব্যবহারকারীর কাছে ডেটা প্রদর্শন করবেন তা এখন আপনার উপর নির্ভর করে।

post()-এর জটিল প্রক্রিয়ার মোকাবিলা করার জন্য নিজেকে অভিনন্দন জানাতে একটু সময় নিন ! আপনি যদি নিজের অ্যাপ তৈরির এই পর্যায়ে থাকেন, মনে রাখবেন যে ত্রুটিগুলি ঘটে। শান্ত থাকুন এবং ডিবাগ করুন!