वेब ऐप बनाते समय, यह अपरिहार्य है कि हमें यूज़र द्वारा इनपुट किए गए डेटा से कुछ बनाना होगा। यह तब हो सकता है जब कोई अपनी जानकारी साइन-अप फॉर्म के माध्यम से सबमिट करके एक नया यूज़र अकाउंट बनाता है, या आपके शानदार नए रेसिपी ऑर्गनाइज़र ऐप से एक नई रेसिपी बनाता है। फॉर्म में यूज़र डेटा से आपके डेटाबेस में सेव की गई रेसिपी के एक नए इंस्टेंस तक जाने के लिए एक HTTP POST रिक्वेस्ट की आवश्यकता होती है।
POST रिक्वेस्ट वही है जो फॉर्म से डेटा को सर्वर पर भेजती है जहां इसे बैकएंड या API में बनाया जा सकता है और डेटाबेस में सेव किया जा सकता है। डिफ़ॉल्ट रूप से, फॉर्म सबमिट करने के लिए रीडायरेक्ट या पेज रिफ्रेश की आवश्यकता होती है। हालांकि यह छोटे ऐप्स के लिए पूरी तरह से ठीक है, हम तेज़ लोडिंग अनुभव प्रदान करना चाहते हैं इसलिए हम इस व्यवहार को ओवरराइड करेंगे।
jQuery post() रिक्वेस्ट का उपयोग करके हम HTTP रिक्वेस्ट कर सकते हैं, प्रतिक्रिया प्राप्त कर सकते हैं, और यह चुन सकते हैं कि डेटा को कैसे प्रदर्शित किया जाए, वह भी बिना रीडायरेक्ट या रिफ्रेश के! आइए थोड़ा और करीब से देखें कि post() को यह सब करने के लिए क्या चाहिए।
post() पर करीब से नज़र
HTTP रिक्वेस्ट्स कैच के खेल की तरह हैं। ब्राउज़र API एंडपॉइंट के माध्यम से सर्वर को एक रिक्वेस्ट फेंकता है, और सर्वर एक प्रतिक्रिया वापस फेंकता है। post() जो करता है वह उस एंडपॉइंट पर डेटा भेजता है जिसे ऐप के डेटाबेस में बनाया और सेव किया जाएगा।
उपरोक्त सभी को ध्यान में रखते हुए, हम मान सकते हैं कि post() कुछ आर्गुमेंट्स लेता है, है ना? सही! post() अधिकतम चार आर्गुमेंट्स लेता है, लेकिन हमारे उद्देश्यों के लिए, हम मुख्य दो पर ध्यान केंद्रित कर रहे हैं: URL गंतव्य और वह डेटा जिसे हम उस गंतव्य पर भेज रहे हैं।
$.post('/recipes', data)
हमारे रेसिपी ऑर्गनाइज़र ऐप उदाहरण को लेते हुए, हम अपने jQuery सेलेक्टर $ से शुरू करते हैं। post() मेथड को इनवोक करके, हम अपने डेटा को '/recipes' URL पर भेज रहे हैं। अब तक, सब ठीक है। हमने अपने सर्वर पर कुछ डेटा फेंक दिया है। अब, प्रतिक्रिया पकड़ने के लिए तैयार हो जाते हैं!
जो हमारे पास प्रतिक्रिया के रूप में वापस आता है उसे jQuery XHR ऑब्जेक्ट, या jqXHR के रूप में जाना जाता है, जो Promise इंटरफेस को लागू करता है। चिंता न करें! हालांकि वह अंतिम वाक्य डरावना लग सकता है, यह हमें बता रहा है कि प्रतिक्रिया सिर्फ एक ऑब्जेक्ट है। jQuery के उपयोगी done() मेथड के साथ, उस ऑब्जेक्ट को अधिक पठनीय प्रारूप में व्यवस्थित किया जा सकता है।
कैच के खेल की हमारी सादृश्यता को ध्यान में रखते हुए, हम post() के साथ सर्वर पर डेटा फेंकते हैं। हमें एक jqXHR ऑब्जेक्ट वापस फेंका जाता है, जिसे हम done() को पास करते हैं ताकि हम देख सकें कि हमने क्या पकड़ा। अब जब हमने post() की बारीकी से जांच कर ली है, तो आइए देखें कि इसका उपयोग कैसे किया जाए।
jQuery post() कार्यान्वयन
शुरू करने के लिए, हमारे पास एक साधारण 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() मेथड द्वारा पूरा किया जाता है जो क्लिक इवेंट को आर्गुमेंट के रूप में लेकर एक कॉलबैक फंक्शन लेता है। समीक्षा करने के लिए, एक JavaScript कॉलबैक फंक्शन एक फंक्शन है जिसे हम किसी अन्य फंक्शन को आर्गुमेंट के रूप में पास कर सकते हैं जिसे बाद में निष्पादित किया जाए।
इस कॉलबैक फंक्शन के अंदर से, हम preventDefault() के साथ डिफ़ॉल्ट रीडायरेक्ट को रोक सकते हैं। अब, हम रीडायरेक्ट नहीं कर रहे हैं और सर्वर को कुछ डेटा सबमिट करना शुरू कर सकते हैं।
post() को डेटा भेजने के लिए इनवोक करने से पहले, हमें डेटा चाहिए! हम इस डेटा को कहां से प्राप्त करते हैं?
हम फॉर्म से डेटा प्राप्त करते हैं। चूंकि हम अब रीडायरेक्ट नहीं कर रहे हैं, हमारे पास फॉर्म के टेक्स्ट इनपुट्स में मानों तक पहुंच है। उस serialize() मेथड के साथ क्या हो रहा है?
serialize() मेथड को this कीवर्ड के साथ चुने गए फॉर्म पर कॉल किया जाता है। serialize() क्या करता है वह फॉर्म डेटा को मानक URL-एन्कोडेड नोटेशन में एक टेक्स्ट स्ट्रिंग में बदल देता है, जिसे सर्वर पर भेजा जा सकता है।
एक बार जब हम अपने फॉर्म डेटा को ठीक से सीरियलाइज़ कर लेते हैं, तो हम इसे एक वेरिएबल में संग्रहीत करते हैं:
$(document).ready(() => {
$('#new-recipe').submit((event) => {
event.preventDefault();
var values = $(this).serialize();
})
})
अब हमारे पास values वेरिएबल में संग्रहीत डेटा है, हम अब इसे सर्वर पर भेज सकते हैं!
$(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 के अधिक पठनीय वेरिएबल में संग्रहीत करने के बाद, हम name और ingredient एट्रिब्यूट्स को एक्सेस कर सकते हैं। उदाहरण के लिए, हमने इन एट्रिब्यूट्स को recipes क्लास वाले <div> में डाला।
निष्कर्ष
हमने यहां बहुत सारी जमीन कवर की है! post() सीखने का जश्न मनाने से पहले, आइए जल्दी से पुनर्कथन करें कि हमने क्या सीखा।
post() के लिए एक सामान्य उपयोग .submit() के अंदर कॉलबैक फंक्शन के रूप में है। चूंकि .submit() फॉर्म पर ही कॉल किया जाता है, हम JavaScript this कीवर्ड का उपयोग फॉर्म में सभी डेटा को संदर्भित करने और इसे serialize() करने के लिए कर सकते हैं। सीरियलाइज़्ड डेटा को एक वेरिएबल में संग्रहीत करने के बाद, जिसे अक्सर values कहा जाता है, हम इन values को post() का उपयोग करके अपने गंतव्य URL पर भेज सकते हैं।
post() द्वारा लौटाए गए jqXHR ऑब्जेक्ट को एक वेरिएबल में संग्रहीत करना एक अच्छी आदत है जिसे आमतौर पर posting कहा जाता है। यहां से हम अपने posting वेरिएबल पर handy done() मेथड का उपयोग करते हैं, और अब हमारे पास उस डेटा तक पहुंच है जिसका सर्वर ने प्रतिक्रिया में जवाब दिया है। अब यह आप पर निर्भर है कि आप डेटा को अपने यूज़र को कैसे प्रदर्शित करते हैं।
अपने आप को post() की जटिल प्रक्रिया से निपटने के लिए बधाई देने के लिए एक पल लें! यदि आप अपने खुद के ऐप को बनाने के इस चरण में हैं, तो याद रखें कि त्रुटियां होती हैं। शांत रहें और डीबग करें!
