Jquery का उपयोग करके सर्वर को अजाक्स फॉर्म भेजना

2024 लेखक: Trinity Chesterton | [email protected]. अंतिम बार संशोधित: 2024-02-02 15:25

कितनी बार आपने इस तथ्य का सामना किया है कि आपने गलत डेटा दर्ज किया है, जिसके कारण पृष्ठ पुनः लोड हो गया और फ़ील्ड में दर्ज वर्णों को पूरी तरह से हटा दिया गया। इसे ठीक करने के लिए, यूजर इंटरफेस बनाने का एक काफी लोकप्रिय तरीका है, और इसका नाम अजाक्स है। यह कई प्रोजेक्ट्स में दिखाई देता है और कई तरह से इस्तेमाल किया जाता है।

AJAX फ़ॉर्म भेजना: पुस्तकालयों को जोड़ना

index.php में jquery लाइब्रेरी शामिल करें।

दस्तावेज़ में jquery को शामिल करने का एक और तरीका है। आपको jQuery आधिकारिक साइट से पुस्तकालय डाउनलोड करने की जरूरत है, इसे सही फ़ोल्डर में रखें और लिंक को इस तरह पेस्ट करें:




दस्तावेज़ों को जोड़ना और सेट करना
1. आपके लिए सुविधाजनक किसी भी नाम वाली साइट के साथ फ़ोल्डर में एक.php दस्तावेज़ बनाएं - यह अजाक्स PHP फॉर्म भेज रहा होगा। इसमें आप लिख सकते हैं कि मैसेज वाला टेक्स्ट किस फॉर्मेट में प्रदर्शित होगा। उदाहरण के लिए, form1.php.





2. अपने जावास्क्रिप्ट फ़ाइल फ़ोल्डर में, के साथ एक.js फ़ाइल बनाएँकोई सुविधाजनक नाम। उदाहरण के लिए, form.js.





3. इस फ़ोल्डर को अपने दस्तावेज़ से कनेक्ट करें।



4. निम्नलिखित पैरामीटर के साथ एक फॉर्म बनाएं:



इसमें अपना डेटा दर्ज करने के लिए फ़ील्ड बनाना न भूलें।
5. साइट के साथ निर्देशिका में form1.php फ़ाइल पर जाएँ, जिसमें लिखें:
अब, फॉर्म जमा करते समय, ब्राउज़र डेटा के बारे में जानकारी प्रदर्शित करेगा।
उसी फाइल में आप लिख सकते हैं कि वास्तव में क्या प्रदर्शित किया जाएगा या कैसे। आप यहां साइकिल या एल्गोरिदम भी लिख सकते हैं।

AJAX jQuery फॉर्म भेजा जा रहा है
1. बनाई गई form.js फ़ाइल में, आपको वह कोड लिखना होगा जो साइट पेज के पूरी तरह लोड होने के बाद फ़ाइल को काम करने के लिए ज़िम्मेदार है।


$(दस्तावेज़)। तैयार (फ़ंक्शन () {//हमारा अगला कोड यहां चलेगा});

2. फिर आपको सबमिट बटन को कस्टमाइज़ करना होगा। यह सब एक ही फाइल में करें।


$("form").submit(function(event) {event.preventDefault(); // निम्नलिखित कोड यहां लिखा जाएगा});

कोड का पहला भाग पृष्ठ पर तत्व का चयन करने के लिए जिम्मेदार है, और दूसरा डिफ़ॉल्ट कार्रवाई को रोकने के लिए जिम्मेदार है।
3. फिर, उदाहरण के लिए, सफलता पर एक अजाक्स फ़ॉर्म सबमिशन लें।


$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), सामग्री प्रकार: झूठा, कैश: झूठा, प्रक्रिया डेटा: झूठा, सफलता: समारोह (परिणाम) {अलर्ट (परिणाम); }});

प्रत्येक सेटिंग का विस्तृत विवरण निम्नलिखित हैं।

प्रकार -यह उस प्रकार का अनुरोध है जिसे फ़ॉर्म में सबमिट किया गया है; चूंकि इसकी लागत POST है, इसलिए अनुरोध प्रकार उपयुक्त होगा;
यह - निर्माण के अंदर तत्व चयन;
attr - आकर्षण (आकर्षण) के लिए छोटा, यानी चयनित लक्ष्य (रूप) का एक निश्चित पैरामीटर आकर्षित होता है;
url - अनुरोध कहां भेजा जाएगा इसके लिए जिम्मेदार पैरामीटर; इस मामले में, प्रपत्र मापदंडों में क्या लिखा है (form1.php);
डेटा - प्रपत्र डेटा निर्दिष्ट करता है;
contentType - सर्वर को हेडर भेजने के लिए जिम्मेदार; इस मामले में इसकी आवश्यकता नहीं है;
कैश - उपयोगकर्ता के कैश को बचाने के लिए जिम्मेदार;
processData - डेटा को एक स्ट्रिंग में बदलने के लिए जिम्मेदार;
सफलता - एक सफल डेटा सबमिशन का परिणाम प्रदर्शित करता है; इसलिए, यदि डेटा भेजना सफल रहा, तो फ़ंक्शन की क्रियाएं निष्पादित की जाती हैं।

4. हो गया, अब अजाक्स फ़ॉर्म सबमिट करते समय, आप पृष्ठ को रीफ़्रेश किए बिना डेटा प्राप्त करेंगे।
form1.php फ़ाइल का उपयोग करके परिणाम बदला जा सकता है, जहां आप निर्दिष्ट कर सकते हैं कि वास्तव में परिणाम के रूप में क्या प्रदर्शित किया जाएगा। उदाहरण के लिए, आप कुछ डेटा दर्ज करने की शुद्धता के लिए प्रयोग कर सकते हैं और जांच कर सकते हैं: यदि डेटा सही नहीं है, तो वांछित संदेश प्रदर्शित होता है, अन्यथा यह सही पृष्ठ पर रीडायरेक्ट करता है। और भी बहुत कुछ संभव है, जो तुम्हारा दिल चाहता है।





एसिंक्रोनस रूप से सर्वर को डेटा भी भेज रहा है। यह तब होता है जब उपयोगकर्ता पाठ में प्रवेश करता है, और इसे तुरंत लाल रंग में हाइलाइट किया जाता है, यह दर्शाता है कि दर्ज किया गया डेटा सही नहीं है। इसके बारे मेंइंटरनेट पर कई मैनुअल हैं, जहां सब कुछ स्पष्ट रूप से समझाया गया है और उदाहरणों के साथ दिखाया गया है।

निष्कर्ष
निस्संदेह, अजाक्स वेबसाइट निर्माण में एक उपयोगी उपकरण है। उच्च-गुणवत्ता वाले पृष्ठ और इंटरफ़ेस बनाने के लिए, यह बस आवश्यक है। यह ध्यान देने योग्य है कि चित्र और कोड में क्या लिखा है, इसे पूरी तरह से समझने के लिए jQuery को जानना बहुत महत्वपूर्ण है, क्योंकि एक साधारण कॉपी-पेस्ट हमेशा आपको कोड को समझने में मदद और सिखा नहीं सकता है। यह हमेशा याद रखने योग्य है कि भाषा संस्करण अपडेट किए जाते हैं और कुछ विशेषताएं आसानी से गायब हो सकती हैं। इसलिए, सभी समाधान प्रासंगिक नहीं हो सकते हैं, अक्सर लिखित कोड काम नहीं करता है या वह परिणाम नहीं देता है जिसे आप अपनी स्क्रीन पर देखना चाहते हैं।