विज्ञापन
AJAX एक उल्लेखनीय वेब तकनीक है जो हमें सरल से आगे ले गई है ”लिंक पर क्लिक करें, दूसरे पृष्ठ पर जाएं" की संरचना इंटरनेट 1.0.
AJAX, जिसके लिए खड़ा है एसिंक्रोनस जावास्क्रिप्ट और एक्सएमएल, उपयोगकर्ता को वर्तमान पृष्ठ से दूर जाने के बिना वेबसाइटों को गतिशील रूप से लाने और प्रदर्शित करने में सक्षम बनाता है। यह एक बहुत अधिक इंटरैक्टिव उपयोगकर्ता अनुभव की ओर जाता है, और चीजों को गति भी दे सकता है क्योंकि एक पूरे नए वेबपेज को लोड नहीं किया जाना चाहिए। सौभाग्य से, AJAX का उपयोग करना वर्डप्रेस वातावरण के भीतर से करना काफी आसान है, और आज मैं आपको यह दिखाने जा रहा हूं कि कैसे।
इस अजाक्स ट्यूटोरियल को काफी उन्नत माना जाना चाहिए, और पिछली बार से जारी रहेगा जहां हमने सीखा था कस्टम डेटाबेस तालिकाओं का उपयोग कैसे करें वर्डप्रेस में कस्टम डेटाबेस टेबल्स के साथ काम करनाबेस्ट ऑफ़ वर्डप्रेस प्लगइन्स पेज का एक त्वरित स्कैन आपके द्वारा अपने ब्लॉग को कठिन बनाने के कई अनोखे और आला तरीकों को प्रकट करेगा। यदि आपके पास पहले से ही एक डेटाबेस है ... अधिक पढ़ें वर्डप्रेस टेम्पलेट के भीतर से - मेरे उदाहरण में, ग्राहक डेटा की एक सरल मौजूदा तालिका का उपयोग किया गया था। जब डेटाबेस में चीजों को वापस डालने की बात आती है, तो हम वर्डप्रेस के भीतर एक छोटे AJAX जादू का उपयोग करने जा रहे हैं।
आज के ट्यूटोरियल के सभी कोड इस बात का संदर्भ देंगे कि हमने पिछली बार क्या लिखा था, लेकिन अगर आप अभी वर्डप्रेस में AJAX कैसे करें, तो यह उतना ही प्रासंगिक है।
AJAX का उपयोग क्यों करें?
AJAX का सबसे आम उपयोग रूपों से संबंधित है - यदि कोई उपयोगकर्ता नाम लिया गया है या जाँच कर रहा है, या आपके द्वारा दिए गए किसी विशेष उत्तर के आधार पर विभिन्न प्रश्नों के साथ शेष फ़ॉर्म को पॉप्युलेट कर रहा है। मूल रूप से हालांकि, आप AJAX का उपयोग जब भी आप एक घटना चाहते हैं (जैसे कुछ क्लिक करने वाला उपयोगकर्ता, या कुछ टाइप करना) एक से बंधा हुआ सर्वर साइड इसमें होने वाली कार्रवाई पृष्ठभूमि.
हम अपने महत्वपूर्ण कस्टमाइज्ड कस्टमर डेटाबेस टेबल में नई प्रविष्टियाँ जोड़ने के लिए इसका उपयोग करने जा रहे हैं, लेकिन आप शायद कुछ और रोमांचक लेकर आ सकते हैं।
WordPress में AJAX का उपयोग कैसे करें का अवलोकन
- किसी प्रपत्र या जावास्क्रिप्ट ईवेंट को शामिल करने के लिए अपने कस्टम टेम्पलेट को संपादित करें जो jQuery AJAX के माध्यम से डेटा सबमिट करेगा व्यवस्थापक-ajax.php आप जो भी पोस्ट डेटा पास करना चाहते हैं, उसमें शामिल हैं। सुनिश्चित करें कि jQuery लोड किया जा रहा है।
- अपनी थीम में एक फ़ंक्शन को परिभाषित करें function.php; पोस्ट चर पढ़ें, और यदि आप चाहें तो उपयोगकर्ता को कुछ वापस लौटाएं।
- A जोड़ें AJAX की कार्रवाई हुक अपने कार्य के लिए।
पर्चा बनाना
नए ग्राहक विवरण दर्ज करने के लिए फ्रंट-एंड पर एक सरल फ़ॉर्म बनाकर शुरू करें। यह कुछ भी जटिल नहीं है, बस अपने कस्टम टेम्प्लेट के मुख्य भाग को इस कोड से बदलें, जो हमने पिछले सप्ताह शुरू किया था, जहाँ is_user_logged_in () चेक होता है:
if (is_user_logged_in ()):??
केवल एक चीज जो आपको अजीब लग सकती है वह यह है कि एक छिपे हुए इनपुट फ़ील्ड का उपयोग होता है जिसे कहा जाता है कार्य - इसमें AJAX के माध्यम से उस फ़ंक्शन का नाम होगा जो हम ट्रिगर करेंगे।
PHP रिसीवर
इसके बाद, खोलें functions.php और सुनिश्चित करें कि आपकी साइट पर jQuery लोड किया जा रहा है, निम्नलिखित पंक्ति जोड़ें:
wp_enqueue_script ( 'jQuery');
AJAX कॉल लिखने की मूल संरचना इस प्रकार है:
समारोह myFunction () { //कुछ करो। मरने (); } add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');
उन अंतिम दो पंक्तियों में कार्रवाई हुक हैं जो वर्डप्रेस को बताते हैं "मेरे पास एक फ़ंक्शन है जिसे myFunction कहा जाता है, और मैं चाहता हूं कि आप इसके लिए सुनें क्योंकि यह AJAX इंटरफ़ेस के माध्यम से बुलाया जाएगा" - पहला एडमिन लेवल यूजर्स के लिए है, जबकि wp_ajax_nopriv_ उन उपयोगकर्ताओं के लिए है जो लॉग इन नहीं हैं। इसके लिए पूरा कोड है functions.php हम अपने विशेष ग्राहकों की तालिका में डेटा डालने के लिए उपयोग करने जा रहे हैं, जिसे मैं शीघ्र ही समझाऊंगा:
wp_enqueue_script ( 'jQuery'); समारोह addCustomer () {वैश्विक $ wpdb; $ नाम = $ _POST ['नाम']; $ फोन = $ _POST ['फोन']; $ ईमेल = $ _POST ['ईमेल']; $ पता = $ _POST ['पता']; अगर ($ wpdb-> डालने ( 'ग्राहकों की, सरणी ( 'नाम' => $ नाम, 'ईमेल' => $ ईमेल, 'पता' => $ पता, 'फोन' => $ फोन। )) FALSE) {गूंज "त्रुटि"; } अन्य { गूंज "ग्राहक '"। $ नाम। "" सफलतापूर्वक जोड़ा गया, पंक्ति आईडी है "। $ wpdb-> insert_id; } मरने (); } add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // वास्तव में जरूरत नहीं है
पहले की तरह, हम घोषणा कर रहे हैं वैश्विक $ wpdb हमें डेटाबेस तक सीधी पहुँच प्रदान करने के लिए। हम फिर हथियाने वाले हैं पद वैरिएबल जिसमें फॉर्म डेटा होता है। एक IF स्टेटमेंट में घिरा फंक्शन है $ Wpdb-> डालने, जो हम अपने टेबल में डेटा डालने के लिए उपयोग करते हैं। चूंकि वर्डप्रेस नियमित पोस्ट और मेटा डेटा डालने के लिए विशिष्ट कार्य प्रदान करता है, यह $ Wpdb-> डालने विधि आमतौर पर केवल कस्टम तालिकाओं के लिए उपयोग की जाती है। आप ऐसा कर सकते हैं कोडेक्स पर इसके बारे में अधिक पढ़ें, लेकिन मूल रूप से यह तालिका के नाम में डाला जाता है, उसके बाद ए सरणी का स्तंभ / मूल्य जोड़े।
असत्य यह देखने के लिए कि क्या इंसर्ट फ़ंक्शन विफल है, और यदि ऐसा है, तो यह आउटपुट करता है "त्रुटि“. यदि नहीं, तो हम केवल उस उपयोगकर्ता को एक संदेश भेज रहे हैं जो ग्राहक X जोड़ा गया, और गूंज रहा है $ Wpdb-> insert_id चर, जो इंगित करता है ऑटो-इंक्रीमेंट वेरिएबल अंतिम इंसर्ट ऑपरेशन जो हुआ (यह मानकर कि आपने एक आईडी की तरह एक ऑटो-इन्क्रीमेंट वाले क्षेत्र को सेट किया है).
आखिरकार, मरने () डिफ़ॉल्ट को ओवरराइड करेगा मरो (0) वर्डप्रेस द्वारा प्रदान - यह इस तरह से आवश्यक नहीं है, लेकिन इसके बिना आप प्राप्त करने जा रहे हैं 0 आपके द्वारा टेम्पलेट पर वापस भेजे गए किसी भी चीज़ के अंत में संलग्न।
जावास्क्रिप्ट
अंतिम चरण मैजिक बिट है - वास्तविक जावास्क्रिप्ट जो AJAX कॉल शुरू करेगा। आप देखेंगे कि जिस रूप में हमने पहले जोड़ा था, क्रिया क्षेत्र खाली छोड़ दिया गया था। ऐसा इसलिए है क्योंकि हम अपने AJAX कॉल के साथ इसे ओवरराइड कर रहे हैं। ऐसा करने का सामान्य तरीका होगा:
jQuery.ajax ({प्रकार: "POST", url: "/wp-admin/admin-ajax.php", // हमारे PHP हैंडलर फ़ाइल डेटा: "myDataString", सफलता: फ़ंक्शन (परिणाम) {// कुछ के साथ करते हैं लौटा डेटा})};
AJAX कॉल की मूल संरचना जिसका हम उपयोग कर रहे हैं, लेकिन निश्चित रूप से एकमात्र तरीका नहीं है जो आप इसे कर सकते हैं। आप सोच रहे होंगे कि हम इसका जिक्र क्यों कर रहे हैं WP-व्यवस्थापक यहाँ, भले ही यह साइट के फ्रंट-एंड पर होगा। बस यहीं है AJAX हैंडलर यह पता चलता है कि आप सामने वाले या व्यवस्थापक पक्ष के कार्यों के लिए इसका उपयोग कर रहे हैं - भ्रमित करना, मुझे पता है। ग्राहक कोड में सीधे निम्नलिखित कोड पेस्ट करें:
पहली पंक्ति में, हम अपने ajaxSubmit फ़ंक्शन को उस फ़ॉर्म से जोड़ रहे हैं जो हमने पहले बनाया था - इसलिए जब उपयोगकर्ता सबमिट करता है, तो यह हमारे विशेष AJAX फ़ंक्शन के माध्यम से जाता है। इसके बिना हमारा रूप कुछ नहीं करेगा। हमारे में ajaxSubmit () कार्य, पहली बात जो हम करते हैं क्रमबद्ध करें() फार्म। यह बस सभी फॉर्म वैल्यू को लेता है, और उन्हें एक लंबे स्ट्रिंग में बदल देता है जिसे हमारा PHP बाद में पार्स कर देगा। अगर यह सब सही हो जाता है, तो हमने फीडबैक डेटा को DIV में फीडबैक की आईडी के साथ डाल दिया।
बस। सब कुछ सहेजें, ताज़ा करें और कुछ फ़ॉर्म डेटा सबमिट करने का प्रयास करें। यदि आपको कोई समस्या है, तो आप देख सकते हैं पेज टेम्पलेट का पूरा कोड यहाँ (डिफ़ॉल्ट बीस-ग्यारह थीम पर आधारित), और जोड़ने के लिए कोड यहां कार्य करें(प्रतिस्थापित न करें, बस इसे अंत में जोड़ें).
ध्यान रखने योग्य बातें
सुरक्षा: यह कोड तैयार नहीं है और केवल सीखने के उद्देश्यों के लिए है। हमने एक प्रमुख बिंदु छोड़ा है, और वह है एक का उपयोग WP-अस्थायी रूप से - वर्डप्रेस द्वारा उत्पन्न एक-बंद कोड जो यह सुनिश्चित करता है कि AJAX अनुरोध केवल वहीं से आ रहा है जहाँ इसका उद्देश्य था; एक पासकी अगर तुम करोगे इसके बिना, यादृच्छिक डेटा डालने के लिए आपके फ़ंक्शन का प्रभावी ढंग से शोषण किया जा सकता है। हालाँकि, SQL इंजेक्शन के हमले एक समस्या नहीं हैं, क्योंकि हमने वर्डप्रेस के माध्यम से प्रश्नों को रूट किया है $ Wpdb-> डालने फ़ंक्शन - वर्डप्रेस आपके लिए किसी भी इनपुट को साफ करता है और उन्हें सुरक्षित बनाता है।
ग्राहकों की तालिका अपडेट करना: अभी, हम केवल एक पुष्टिकरण संदेश वापस भेजते हैं, लेकिन ग्राहकों की तालिका अपडेट नहीं की जाती है - यदि आप पृष्ठ को रीफ्रेश करते हैं तो आप केवल अतिरिक्त प्रविष्टियाँ देखेंगे। (जो AJAX के माध्यम से यह सब करने के उद्देश्य को हरा देता है). देखें कि क्या आप एक नया AJAX फ़ंक्शन बना सकते हैं जो गतिशील रूप से तालिका को आउटपुट कर सकता है।
इनपुट सत्यापन: क्योंकि फॉर्म डेटा के साथ कोई सत्यापन नहीं चल रहा है, यदि आप कई बार प्रेस करते हैं तो रिक्त प्रविष्टियों या एकाधिक प्रविष्टियों को जोड़ना संभव है। प्रपत्र फ़ील्ड पर कुछ इनपुट सत्यापन, उन्हें पूरा करने के साथ ही डेटाबेस में पहले से मौजूद ईमेल या फोन नंबर की जांच करने के लिए SQL भी उपयोगी होगा।
इस हफ्ते मेरे पास से - यदि आपको इस ट्यूटोरियल के बाद कोई समस्या नहीं है, तो टिप्पणी के माध्यम से संपर्क करने में संकोच न करें और मैं आपकी मदद करने की पूरी कोशिश करूंगा; या यदि आप इसे किसी तरह से अनुकूलित करने की कोशिश कर रहे हैं, तो मेरे लिए विचारों को उछालने के लिए स्वतंत्र महसूस करें। मुझे आशा है कि यह वास्तव में सिर्फ एक छोटा सा जावास्क्रिप्ट, PHP और MySQL के संयोजन से वर्डप्रेस के भीतर से कितना कुछ दिखा सकता है। हमेशा की तरह, हमारे अन्य सभी चेक आउट करना न भूलें वर्डप्रेस लेख.
जेम्स के पास आर्टिफिशियल इंटेलिजेंस में बीएससी है, और कॉम्पिटिया ए + और नेटवर्क + प्रमाणित है। वह MakeUseOf के प्रमुख डेवलपर हैं, और अपना खाली समय वीआर पेंटबॉल और बोर्डगेम खेलने में बिताते हैं। वह पीसी का निर्माण कर रहा है क्योंकि वह एक बच्चा था।
