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