jQuery ajax - load() विधि

jQuery Ajax संदर्भ पुस्तक

उदाहरण

AJAX अनुरोध के द्वारा div एलीमेंट के लिए टेक्स्ट को बदलने के लिए इस्तेमाल करें:

$("button").click(function(){
  $("div").load('demo_ajax_load.txt');
});

अपने आप सामने देखें

आपको पृष्ठ के नीचे अधिक TIY उदाहरण मिल सकते हैं

व्याख्या और उपयोग

load() विधि एक AJAX अनुरोध से सर्वर से डाटा लोड करती है और वापसी डाटा को निर्दिष्ट एलीमेंट में रखती है。

टिप्पणीःएक और नाम load के jQuery घटनाविधि. आगे क्या बुलाया जाता है, इसका निर्धारण पैरामीटरों पर होता है。

व्याकरण

load(url,data,function(response,status,xhr))
पैरामीटर वर्णन
url अनुरोध को भेजने के लिए निर्दिष्ट करने वाला URL।
data वैकल्पिक। अनुरोध के साथ सर्वर को भेजे जाने वाले डाटा को निर्दिष्ट करता है。
function(response,status,xhr)

वैकल्पिक। अनुरोध पूरा होने पर चलने वाले फ़ंक्शन को निर्दिष्ट करता है。

अतिरिक्त पारामीटर:

  • response - अनुरोध के परिणाम डाटा शामिल है
  • status - अनुरोध की स्थिति ("success", "notmodified", "error", "timeout" या "parsererror")
  • xhr - XMLHttpRequest वस्तु शामिल है

विस्तृत वर्णन

यह विधा सर्वाधिकार से दस्तावेज से डाटा प्राप्त करने की सबसे सरल विधा है। यह लगभग $.get(url, data, success) से बराबर है, लेकिन यह एक वैश्विक फ़ंक्शन नहीं है और यह एक अन्यत्र कॉलबैक फ़ंक्शन रखती है। जब सफल प्रतिक्रिया का पता चला (उदाहरण के लिए, textStatus "success" या "notmodified" होने पर), .load() वहां जो एलिमेंट का HTML सामग्री वापस लूटे गए डाटा के रूप में सेट करती है। इसलिए इस विधा के अधिकांश प्रयोग सबसे सरल होते हैं:

$("#result").load("ajax/test.html");

यदि कॉलबैक फ़ंक्शन प्रदान किया गया है, तो उसका प्रयोग post-processing के बाद किया जाएगा:

$("#result").load("ajax/test.html", function() {
  alert("Load was performed.");
});

उपरोक्त दोनों उदाहरणों में, यदि मौजूदा दस्तावेज "result" आयाम को नहीं शामिल करता है, तो .load() विधा काम करेगी नहीं。

यदि दाता वस्तु है, तो POST विधा का प्रयोग किया जाएगा; अन्यथा GET विधा का प्रयोग किया जाएगा。

पृष्ठ खण्ड लोड करना

.load() विधा, $.get() से अलग, हमें यह निर्दिष्ट करने की अनुमति देती है कि कौन सा दूरस्थ दस्तावेज का किस हिस्से को जोड़ा जाए। इसे विशेष यूरी लेकिंक से प्रयोग करके प्राप्त किया जाता है। यदि इस वाक्यवली में एक या अधिक खाली जगह है, तो पहली खाली जगह के बाद का वाक्यवली वहां जोड़े जाने वाले सामग्री के लिए jQuery चयनक वाक्यवली है。

हम उपरोक्त उदाहरण को संशोधित कर सकते हैं, ताकि हम लूटे गए दस्तावेज के किसी हिस्से को इस्तेमाल कर सकें:

$("#result").load("ajax/test.html #container");

यदि इस विधि को चलाया जाए, तो ajax/test.html की सामग्री लूट ली जाएगी, लेकिन फिर, jQuery वापस लूटे गए दस्तावेज को पढ़कर, वहां जो एलिमेंट वाला आयाम है, उसे और उसकी सामग्री को वहां लगाया जाएगा जहां result आयाम है, लूटे गए दस्तावेज का बाकी हिस्सा फेंक दिया जाएगा。

jQuery ब्राउज़र की .innerHTML विशेषता का उपयोग करके लौटाए गए दस्तावेज़ को पढ़ता है, और इसे मौजूदा दस्तावेज़ में जोड़ता है। इस प्रक्रिया के दौरान, ब्राउज़र अक्सर दस्तावेज़ से तत्वों को फ़िल्टर करता है, जैसे <html>, <title> या <head> तत्व। परिणामस्वरूप, .load() द्वारा लौटाए गए तत्व ब्राउज़र द्वारा सीधे लौटाए गए दस्तावेज़ से पूरी तरह से अलग हो सकते हैं।

टिप्पणीःब्राउज़र सुरक्षा की सीमा के कारण, अधिकांश "Ajax" अनुरोध समान-स्रोत रणनीति का पालन करते हैं; अलग डोमेन, उप-डोमेन या प्रोटोकॉल से अनुरोधों को सफलता के साथ डाटा लाने में असमर्थ हैं।

और अधिक उदाहरण

उदाहरण 1

feeds.html फ़ाइल की सामग्री को लोड करें:

$("#feeds").load("feeds.html");

उदाहरण 2

ऊपर के उदाहरण के समान है, लेकिन अतिरिक्त पारामीटरों को POST रूप में भेजें और सफलता के साथ संदेश दिखाएं:

$("#feeds").load("feeds.php", {limit: 25}, function(){
  alert("The last 25 entries in the feed have been loaded");
});

उदाहरण 3

अनुच्छेद नाविका भाग को एक अनुच्छेद सूची में लोड करें:

HTML कोडः

<b>jQuery Links:</b>
<ul id="links"></ul>

jQuery कोडः

$("#links").load("/Main_Page #p-Getting-Started li");

और अधिक TIY उदाहरण

AJAX अनुरोध बनाएं, और इस अनुरोध के द्वारा डाटा भेजें
कैसे data पारामीटर का उपयोग करके AJAX अनुरोध के द्वारा डाटा भेजें।(इस उदाहरण AJAX शिक्षण में प्रदर्शित है।)
AJAX अनुरोध बनाएं, और इस अनुरोध के द्वारा डाटा भेजें
कैसे function पारामीटर का उपयोग करके AJAX अनुरोध से आने वाले डाटा परिणाम को संभालें।
त्रुटि वाला AJAX अनुरोध बनाएं
कैसे function पारामीटर का उपयोग करके AJAX अनुरोध में त्रुटि को संभालें (XMLHttpRequest पारामीटर का उपयोग करके)।

jQuery Ajax संदर्भ पुस्तक