JQuery एक जावास्क्रिप्ट लाइब्रेरी है जिसका लक्ष्य "कम लिखें, अधिक करें" है। jQuery को आपकी साइट से कनेक्ट करना और उपयोग शुरू करना आसान है। jQuery आपकी साइट पर जावास्क्रिप्ट का उपयोग करना बहुत आसान बनाता है।
jQuery जावास्क्रिप्ट कोड की बहुत सारी पंक्तियों को हटा देता है, और आपको केवल एक विधि से इन बहुत सारी पंक्तियों को लागू करने की अनुमति देता है।
AJAX क्या है?AJAX एसिंक्रोनस है (अर्थात, ब्राउज़र अनुरोध भेजने के बाद जो चाहे वह कर सकता है, जैसे प्रतिक्रिया की प्रतीक्षा में संदेश दिखाना, पृष्ठ को स्क्रॉल करना आदि) जावास्क्रिप्ट और XML। इसका उपयोग गतिशील और तेज़ वेब पेज बनाने के लिए किया जाता है। AJAX हमें पूरे पेज को दोबारा लोड किए बिना वेब पेज के कुछ हिस्से को अपडेट करने की अनुमति देता है।
jQuery और AJAX के बारे में क्या?jQuery और AJAX का संयोजन शक्तिशाली कार्यक्षमता प्रदान करता है। Jquery और Ajax के साथ, आप अनुरोध कर सकते हैं और XML, HTML और यहां तक कि सादे पाठ सहित विभिन्न प्रारूपों में जानकारी प्राप्त कर सकते हैं। डेटा एक्सचेंज के लिए आप इसका उपयोग कर सकते हैं JSON प्रारूप. हम अपने HTML पेज में AJAX अनुरोध के माध्यम से प्राप्त डेटा का उपयोग कर सकते हैं।
jQuery मौजूदा ब्राउज़र Ajax API को अधिक शक्तिशाली और उपयोग में आसान बनाता है। अजाक्स कॉल बनाएं सामान्य तरीके सेजावास्क्रिप्ट का उपयोग करना थोड़ा मुश्किल है: चूँकि आपको इसके लिए विचार करना होगा विभिन्न ब्राउज़र XMLHttpRequest ऑब्जेक्ट बनाने के लिए विभिन्न तरीकों की आवश्यकता होती है। इसके अतिरिक्त, यदि आप अजाक्स कॉल के लिए नियमित जावास्क्रिप्ट का उपयोग करते हैं, तो डेटा सबमिट करना, उदाहरण के लिए फॉर्म से, अधिक कठिन हो जाता है।
jQuery सरल और शक्तिशाली कार्यक्षमता प्रदान करता है जो जावास्क्रिप्ट के AJAX तरीकों का विस्तार करता है और अधिक लचीला दृष्टिकोण प्रदान करता है।
इस संक्षिप्त लेख में मैं आपको दिखाऊंगा कि सरल php फॉर्म में jQuery और AJAX का उपयोग कैसे करें। आइए शुरू करें... jQuery और AJAX का उपयोग करने के लिए हमें दो फ़ाइलों की आवश्यकता होगी, पहली फ़ाइल में html/php कोड होगा जिसके माध्यम से AJAX अनुरोध किया जाएगा। दूसरी फ़ाइल में हम अजाक्स अनुरोध को संसाधित करेंगे और परिणाम को पहले पृष्ठ पर लौटाएंगे।
चरण 1: एक School.php फ़ाइल बनाएं और उसमें निम्नलिखित कोड पेस्ट करें:उपरोक्त कोड में हम छात्र का नाम और नंबर प्राप्त कर रहे हैं और jquery और AJAX का उपयोग करके उन्हें विवरण.php पर भेज रहे हैं।
फ़ंक्शन getdetails())( var नाम = $("#name").val(); var rno = $("#rno").val(); $.ajax(( प्रकार: "POST", url: " विवरण .php", डेटा: (fname:name, id:rno) )).done(function(result) ( $("#msg").html(" रोल नंबर का पता " +rno +" है "+परिणाम ) ));
| आपका नाम: | ||
| रोल नंबर: | ||
उपरोक्त कोड में, हम अनुक्रम संख्या और उसके नाम का उपयोग करके छात्र का पता प्राप्त करते हैं।
इस उदाहरण के लिए, आपको एक स्कूल डेटाबेस और एक छात्र तालिका बनाने की आवश्यकता होगी। छात्र तालिका में नाम, अनुक्रम संख्या और पते वाले फ़ील्ड शामिल हैं।
मुझे आशा है कि आपको यह लेख उपयोगी लगेगा।
इस लेख में हम php के साथ Ajax के इंटरेक्शन के बारे में बात करेंगे। Ajax स्क्रिप्ट और php कोड के कार्य को कैसे कनेक्ट करें? वेब विकास में Ajax का उपयोग कैसे करें? यदि आप ऐसे प्रश्नों में रुचि रखते हैं, तो आपको हमारे लेख में उनके उत्तर मिलेंगे। साथ ही AJAX php कोड के उदाहरण।
अजाक्स + php का उपयोग करनायह समझने के लिए कि क्या हमें PHP के साथ AJAX की आवश्यकता है, आइए जानें कि यह किस लिए उपयोगी हो सकता है। Ajax+ php का उपयोग विविध हो सकता है, केवल एक बात यह है कि आप इस तकनीक का उपयोग करके ऐसे पृष्ठ तत्व नहीं बना सकते जो खोज इंजन के लिए प्रासंगिक हों। क्योंकि js ईवेंट को कॉल करते समय AJAX पेज तत्वों को लोड करने के बाद लोड करता है, लेकिन जैसा कि हम जानते हैं, खोज इंजनवे जावास्क्रिप्ट कोड को पढ़ना नहीं जानते हैं, इसलिए आपको सावधानीपूर्वक चयन करना होगा कि आपको कहां आवश्यकता है और कहां आपको php के साथ AJAX का उपयोग करने की आवश्यकता नहीं है।
मैं Ajax + php का उपयोग कहाँ कर सकता हूँ?
1. एक नई टिप्पणी जोड़ना
4. साइट पर खोज का आयोजन (स्वतः पूर्णता)
5. साइट पर चरण-दर-चरण उपयोगकर्ता पंजीकरण
6. ई-मेल की सदस्यता लें
7. तस्वीरें देखें
और दूसरे…
जैसा कि आप देख सकते हैं, Ajax + php का उपयोग करने के लिए बहुत सारे विकल्प हैं। यानी, इसका उपयोग वहां किया जा सकता है जहां पेज को दोबारा लोड करना उचित नहीं होगा, जहां आपको केवल सर्वर के साथ डेटा का आदान-प्रदान करने की आवश्यकता है।
जहां आपको Ajax + php का उपयोग नहीं करना चाहिए
मेरी राय वस्तुनिष्ठ है, हो सकता है कि आप अलग तरह से सोचें, लेकिन अपने अनुभव के आधार पर मैं कहूंगा कि AJAX + php का उपयोग नहीं किया जाना चाहिए:
1. मेनू लागू करना
2. पृष्ठ पर टैब का कार्यान्वयन (उदाहरण के लिए: जब किसी ऑनलाइन स्टोर में किसी उत्पाद पृष्ठ पर आप समीक्षा, सूचना, टिप्पणियाँ, फ़ोटो, वीडियो देखते हैं... तो इन टैब को स्विच करते समय डेटा लोड करने की कोई आवश्यकता नहीं होती है।)
और अन्य नकारात्मक उदाहरण जो आपके पेज की बेहतर रैंकिंग को नुकसान पहुंचा सकते हैं।
php के साथ Ajax इंटरैक्ट करनावास्तव में, AJAX तकनीक PHP स्क्रिप्ट के बिना मौजूद नहीं हो सकती है, क्योंकि AJAX केवल सर्वर पर डेटा भेजता है और पृष्ठों को पुनः लोड किए बिना, रिटर्न प्रतिक्रिया प्राप्त करता है। इसलिए, AJAX और php के कार्य को कैसे जोड़ा जाए, यह प्रश्न पूछना अधिक सही है। लेकिन हम इस बारे में लेख के अगले पैराग्राफ (ajax php उदाहरण) में बात करेंगे, और अब हम Ajax कैसे काम करता है इसकी बारीकियों को समझेंगे।
सर्वर पर डेटा भेजने के लिए, आपको एक XMLHTTPRequest ऑब्जेक्ट बनाना होगा। इसका उपयोग करके, यूआरएल (पीएचपी स्क्रिप्ट) खोलें, इसमें डेटा भेजें (पोस्ट या जीईटी विधि), एक प्रतिक्रिया प्राप्त करें, और जेएस भाषा के ज्ञान का उपयोग करके, प्राप्त सर्वर प्रतिक्रिया को मॉनिटर पर प्रदर्शित करें (प्रतिक्रिया कोई भी टुकड़ा हो सकती है) या साइट पेज का तत्व)।
स्पष्टीकरण के लिए, PHP के साथ AJAX की बातचीत को दर्शाने वाले नीचे दिए गए चित्र को देखें।
PHP के साथ AJAX इंटरैक्शन के उदाहरण के लिए, आइए दो फ़ाइलें बनाएं:
1. ajax_page.html
2. get_ajax.php
सबसे पहले, आइए एप्लिकेशन के उपयोगकर्ता पक्ष, यानी AJAX_ पृष्ठ को देखें। एचटीएमएल:
अजाक्स + पीएचपी: उदाहरण | साइट फंक्शन = गलत;) ) यदि (! =(!param.method ? "POST" : param.method.toUpperCase()); if(method=='GET") ( भेजें=शून्य; परम.url=param.url+"&ajax=true"; ) अन्य ( भेजें=''; for (var i in peram.data) भेजें+= i+'='+param.data[i]+'&'; भेजें=भेजें+'ajax=true' ) req.open(विधि, परम)। यूआरएल, सत्य); if(param.statbox)document.getElementById(param.statbox).innerHTML = " 
"; req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); req.send(send); req.onreadystatechange = function() ( if (req.readyState == 4 && req .status == 200) //यदि उत्तर सकारात्मक है ( if(param.success)param.success(req.responseText); ) ) ) यहां हम AJAX एप्लिकेशन के संचालन और सर्वर प्रतिक्रिया पर रिपोर्ट प्राप्त करेंगे।
इनपुट फ़ील्ड 1
अपना पाठ दर्ज करें.!
इनपुट फ़ील्ड 2
निःशुल्क पाठ... मैं इस लेख का दीवाना हूं और आरएसएस की सदस्यता लेना चाहता हूं ताकि मैं इस तरह के लेख अधिक बार पढ़ सकूं!!!
ajax_page.html:
आइए इस उदाहरण के जावास्क्रिप्ट पक्ष को देखें:
XmlHttp() एक फ़ंक्शन है जो XMLHttpRequest() ऑब्जेक्ट बनाता है; इसे यथासंभव कॉम्पैक्ट और क्रॉस-ब्राउज़र लिखा जाता है।
अजाक्स (परम) - ईवेंट (ऑनक्लिक) को कॉल करते समय हमारा हैंडलर, पैराम ऐरे में आवश्यक डेटा प्राप्त करता है:
यूआरएल - डेटा कहां भेजना है, और यह निम्नलिखित रूप में हो सकता है: पेज। php? पैरामीटर = मान, यानी, GET विधि का उपयोग करके जानकारी प्रसारित की जा सकती है।
स्टेटबॉक्स - HTML ब्लॉक की आईडी जो AJAX + php एप्लिकेशन के परिणाम प्राप्त करेगी।
विधि - डेटा भेजने की विधि, POST या GET हो सकती है। हमारे उदाहरण में, हम POST विधि का उपयोग करते हैं, लेकिन साथ ही, GET विधि का उपयोग करके यूआरएल के माध्यम से जानकारी प्रसारित की जा सकती है।
डेटा - प्रेषित डेटा की सरणी। हमारे उदाहरण में, डेटा स्वचालित रूप से फ़ील्ड 1 और 2 से लिया जाता है, हालाँकि आप केवल डेटा लिख सकते हैं: (नाम: "मूल्य")।
सफलता - फ़ंक्शन या स्वयं फ़ंक्शन का नाम जो प्राप्त डेटा (पाठ) को संसाधित करेगा।
Ajax फ़ंक्शन कॉल, जैसा कि आप देख सकते हैं, onclick=ajax() ईवेंट द्वारा किया जाता है।
अब आइए AJAX + php एप्लिकेशन के सर्वर साइड, यानी get_ Ajax को देखें। php:
यहां सब कुछ बहुत सरल है. सबसे पहले, हम हेडर का उपयोग करके आउटपुट डेटा की एन्कोडिंग सेट करते हैं। हमने डेटा कैशिंग पर प्रतिबंध लगाया है। स्लीप(2) - स्क्रिप्ट को 2 सेकंड के लिए रोक देता है, यह प्रतीक्षा एनीमेशन wait.gif देखने के लिए है। हम $_POST सरणी के सभी तत्वों को पढ़ते हुए और उन्हें आवश्यक एन्कोडिंग (सिरिलिक के लिए) में परिवर्तित करते हुए, प्राप्त डेटा को आउटपुट करते हैं।
हमारे AJAX php एप्लिकेशन को लॉन्च करने के लिए, पेज ajax_page.html को ब्राउज़र में लोड करें
परीक्षण AJAX बटन पर क्लिक करने पर मुझे यही मिला:
यह get_ajax.php फ़ाइल से प्राप्त प्रतिक्रिया है:
को लेकर अभी भी सवाल हैंअजाक्स +php? उनसे नीचे टिप्पणी में पूछें...
मैंने यह लेख उन शुरुआती लोगों के अनुरोध पर शुरू किया है जो अभी JS/jQuery में महारत हासिल करना शुरू कर रहे हैं और देर-सबेर इस समस्या का सामना कर रहे हैं कि व्यवहार में Ajax तकनीक का उपयोग कैसे किया जाए। इस भाग में, मैं कोशिश करूँगा सरल भाषा में (इसे उन्नत उपयोगकर्ताओं को भ्रमित न करें) बताएं कि अपने प्रोजेक्ट में jQuery लाइब्रेरी का उपयोग करके इस "ट्रिक" को कैसे लागू करें।
तो... jQuery में कई विधियाँ हैं जो पृष्ठ को पुनः लोड किए बिना साइट के सर्वर साइड पर अनुरोध करती हैं। हम प्रत्येक विधि को "माइक्रोस्कोप के नीचे" अलग से नहीं देखेंगे, इसका सीधा सा कारण यह है कि वे सभी $.ajax() विधि के कार्य हटा दिए गए हैं। सबसे पहले, आइए नीचे दिए गए कोड को देखें, और फिर हम इसे और अधिक विस्तार से देखेंगे:
एचटीएमएल ( Index.html फ़ाइल)
बढ़िया पेज साइट मुझे क्लिक करें!
इस फ़ाइल में हमने jQuery लाइब्रेरी, हमारे JS कोड के साथ एक फ़ाइल, एक बटन (id = "btn") को कनेक्ट किया है, जब क्लिक किया जाएगा, तो एक AJAX अनुरोध लॉन्च किया जाएगा, और एक ब्लॉक (id = "आउटपुट"), जिसमें हम परिणाम अजाक्स अनुरोध ऑपरेशन आउटपुट करेंगे
जेएस/jQuery ( स्क्रिप्ट.जेएस फ़ाइल)
$(फ़ंक्शन())( var आउटपुट = $("#आउटपुट"); // सूचना आउटपुट ब्लॉक $("#btn").on("क्लिक", फ़ंक्शन())( $.ajax(( url: " पथ/ से/हैंडलर.php", // php हैंडलर प्रकार का पथ: "POST", // डेटा स्थानांतरण विधि डेटा प्रकार: "json", // प्रतिक्रिया डेटा में अपेक्षित डेटा का प्रकार: (कुंजी: 1), // डेटा, जिसे हम भेजने से पहले सर्वर पर स्थानांतरित करते हैं: फ़ंक्शन ()) ( // अनुरोध आउटपुट भेजने से पहले फ़ंक्शन को कॉल किया जाता है। टेक्स्ट ("अनुरोध भेजा गया है। प्रतिक्रिया के लिए प्रतीक्षा करें।"); त्रुटि: फ़ंक्शन ( अनुरोध, टेक्स्ट, त्रुटि)( // अजाक्स अनुरोध आउटपुट को पूरा करने के दौरान ट्रैकिंग त्रुटियां आउटपुट.टेक्स्ट ("ह्यूस्टन, हमें एक समस्या है!" + टेक्स्ट + " | " + त्रुटि); पूर्ण: फ़ंक्शन())( // फ़ंक्शन अनुरोध पूरा होने पर कॉल किया जाता है आउटपुट.एपेंड(''
अनुरोध पूर्णतः पूर्ण हो गया है!
"); ), सफलता: फ़ंक्शन(json)( // फ़ंक्शन जिसे सर्वर से अनुरोध सफल होने पर कॉल किया जाएगा // json - एक वेरिएबल जिसमें सर्वर से प्रतिक्रिया डेटा होता है। इसे आप जो चाहें कॉल करें;) आउटपुट.html (json) ; // सर्वर से प्राप्त डेटा को पेज पर प्रदर्शित करें ) ));मैंने तुरंत इस कोड पर टिप्पणी की, इसलिए कोई विशेष प्रश्न नहीं उठना चाहिए। केवल एक चीज जो मैं कॉपी-पेस्ट के प्रशंसकों के लिए नोट करना चाहता हूं वह यह है कि आपको यूआरएल पैरामीटर में हैंडलर के लिए वास्तविक पथ निर्दिष्ट करने की आवश्यकता है। और एक और बात - उदाहरण में हम मैन्युअल रूप से दर्ज किए गए डेटा (मान "1" के साथ कुंजी "कुंजी") पास कर रहे हैं, लेकिन वास्तविक परियोजनाओं में, यह डेटा कुछ स्रोतों से उठाया जाता है, लेकिन हम इसके बारे में बाद में बात करेंगे।
PHP हैंडलर ( फ़ाइल हैंडलर.php)
