एक jQuery अजाक्स कॉल

Question

से सही वापसी मूल्य नहीं मिल सकता है यह चित्र फ़ाइल नामों की एक सूची वाले JSON ऑब्जेक्ट को वापस करना है। टिप्पणी की गई चेतावनी सही डेटा दिखाती है, लेकिन alert(getPicsInFolder("testfolder"));"error" दिखाती है।

function getPicsInFolder(folder) { 
    return_data = "error"; 
    $.get("getpics.php?folder=" + folder, function (data) { 
    data = jQuery.parseJSON(data); 
    $.each(data, function (index, value) { 
     data[index] = "folders/" + folder + "/" + value; 
    }); 
    //alert(data); // This alert shows the correct data, but that's hardly helpful 
    return_data = data; 
    }); 
    return return_data; 
} 

मैं क्या गलत कर रहा हूं?

Answer 1

आप एसिंक्रोनस $.get() विधि को कॉल कर रहे हैं, जहां इसके कॉलबैक फ़ंक्शन को आपके getPicsInFolder() फ़ंक्शन रिटर्न के बाद बुलाया जाएगा। नीचे दिए गए उदाहरण में टिप्पणियों का पालन करें:

function getPicsInFolder(folder) { 
    return_data = "error"; 
    // Since the $.get() method is using the asynchronous XMLHttpRequest, it 
    // will not block execution, and will return immediately after it is called, 
    // without waiting for the server to respond. 
    $.get("getpics.php", function (data) { 
     // The code here will be executed only when the server returns 
     // a response to the "getpics.php" request. This may happen several 
     // milliseconds after $.get() is called. 
     return_data = data; 
    }); 

    // This part will be reached before the server responds to the asynchronous 
    // request above. Therefore the getPicsInFolder() function returns "error". 
    return return_data; 
} 

आप इस तरह से तर्क को संभालने के लिए कि JSON ऑब्जेक्ट $.get() कॉलबैक में है में अपने कोड पुनर्रचना विचार करना चाहिए। उदाहरण:

$.get("getpics.php?folder=test", function (data) { 
    // Handle your JSON data in here, or call a helper function that 
    // can handle it: 
    handleMyJSON(data); // your helper function 
}); 

Answer 2

आप डेटा को असीमित रूप से प्राप्त कर रहे हैं। कॉलबैक फ़ंक्शन function (data) {} को getPicsInFolder रिटर्न के बाद बुलाया जाता है।

1. (बुरा विकल्प): अपने ajax कॉल सेट तुल्यकालिक होने की

   आपके पास दो विकल्प।

2. (सही विकल्प): अपने कोड को पुन: व्यवस्थित करें, ताकि वापसी डेटा के साथ होने वाली किसी भी चीज़ को कॉलबैक में हो। ,

   function getPicsInFolder(folder, callback) { 
       return_data = "error"; 
       $.get("getpics.php?folder=" + folder, function (data) { 
        data = jQuery.parseJSON(data); 
        $.each(data, function (index, value) { 
         data[index] = "folders/" + folder + "/" + value; 
        }); 
       callback(data); //pass data into the callback function 
   }); 
   

   फिर जब आप के बजाय करने के लिए, अपने getPicsInFolder फोन:

एक तरह से यह करने के लिए getPicsInFolder में इस तरह एक कॉलबैक पारित करने के लिए, हो सकता है

pics = getPicsInFolder('foldername'); 
//do something with pics 

ऐसा करें:

getPicsInFolder('foldername', function (pics) { 
    //do something with pics 
}); 

Answer 3

आप AJAX कैसे काम करता है इस बारे में उलझन में हैं। अनुरोध पूरा होने तक डेटा उपलब्ध नहीं है, जो फ़ंक्शन लौटने के बाद होता है। और डेटा केवल कॉलबैक के भीतर उपलब्ध है।

Answer 4

AJAX अनुरोध एसिंक्रोनस होना चाहिए (आप निष्पादन को रोकने और प्रभावी रूप से आपके यूआई को अवरुद्ध करने की लागत पर तुल्यकालिक करने में सक्षम हैं)।

getPicsInFolder() AJAX अनुरोध पूरा होने से पहले वापस आ रहा है। आप आप अद्यतन करने के लिए यूआई/संभाल JSON ऑब्जेक्ट पूरा घटना (गुमनाम समारोह आप $.get() लिए एक तर्क के रूप गुजर रहे हैं) पर लौटे जरूरत है:

$.get("", function() 
{ 
    // This anonymous function will execute once the request has been completed 

    // Update your UI/handle your data here 
}); 

मैं अपने यूआई में एक तत्व को अद्यतन करना चाहता था कहो ...

$("#ID-of-a-button-in-the-UI").click(function() // executes on click 
{ 
    $.get("url-to-JSON-object", function (json) // executes on request complete 
    { 
     $("#ID-of-element-to-update").html(json.rows[0].key); // updates UI 
    }); 
});