jQuery ajax - getJSON() विधि
उदाहरण
AJAX अनुरोध के द्वारा JSON डाटा प्राप्त करें और परिणाम आउटपुट करें:
$("button").click(function(){ $.getJSON("demo_ajax_json.js",function(result){ $.each(result, function(i, field){ $("div").append(field + " "); }); }); });
वर्णन और उपयोग
HTTP GET अनुरोध के द्वारा JSON डाटा लोड करें।
jQuery 1.2 में, आप अन्य डोमेन के JSON डाटा को JSONP फॉर्म के कॉलबैक फ़ंक्शन के द्वारा लोड कर सकते हैं, जैसे "myurl?callback=?"।jQuery ऑटोमेटिक रूप से ? को सही फ़ंक्शन नाम से स्वचालित कर देगा, ताकि कॉलबैक फ़ंक्शन को चलाया जा सके। ध्यान दें: इस लाइन के बाद का कोड इस कॉलबैक फ़ंक्शन के चलने से पहले चलेगा।
व्याकरण
jQuery.getJSON(url,data,success(data,status,xhr))
पारामीटर | वर्णन |
---|---|
url | अनिवार्य।अनुरोध को भेजने के लिए जिस URL का इस्तेमाल करना है, इसका निर्देश देता है। |
data | चुनने के लिए।सेवा के सर्वर पर भेजे जाने वाले डाटा का निर्देश देता है। |
success(data,status,xhr) |
वैकल्पिक। अनुरोध सफल होने पर चलने वाली फ़ंक्शन को निर्दिष्ट करता है。 अतिरिक्त पारामीटर:
|
विस्तृत वर्णन
यह फ़ंक्शन संक्षिप्त Ajax फ़ंक्शन है, इसका बराबर:
$.ajax({ url: url, data: data, success: callback, dataType: json });
सर्वर को भेजे गए डाटा, यूआरएल के बाद के रूप में क्वेरी स्ट्रिंग के रूप में जोड़ा जा सकता है। यदि data पारामीटर के मूल्य एक ऑब्जेक्ट (मैप) है, तो यूआरएल पर जोड़ने से पहले इसे स्ट्रिंग में बदला जाएगा और यूआरएल कोड़ीकरण किया जाएगा。
को दायर करने के लिए callback की वापसी डाटा, जावास्क्रिप्ट ऑब्जेक्ट हो सकती है, या JSON संरचना के रूप में परिभाषित एक अडडड बाइनरी और इसे $.parseJSON() विधि से विश्लेषित किया जा सकता है。
उदाहरण
test.js से JSON डाटा लोड करें और JSON डाटा में एक name फील्ड डाटा दिखाएं:
$.getJSON("test.js", function(json){ alert("JSON Data: " + json.users[3].name); });
और अधिक उदाहरण
उदाहरण 1
Flickr JSONP API से 4 सबसे नए बिल्ली के बारे में की तस्वीरें लोड करें:
HTML कोड़:
<div id="images"></div>
jQuery कोड़:
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne? tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); });
उदाहरण 2
test.js से JSON डाटा लोड करें, अतिरिक्त पारामीटर जोड़ें, JSON डाटा में एक name फील्ड डाटा दिखाएं:
$.getJSON("test.js", { name: "Bill", time: "2pm" }, function(json){ alert("JSON Data: " + json.users[3].name); });