无法从jQuery Ajax调用中获取正确的返回值

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;

}

您应该考虑以某种方式重构代码，以便在$.get()回调中处理JSON对象的逻辑。例：

$.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。

您有两种选择：

（错误的选择）：将ajax调用设置为同步。

（正确的选项）：重组代码，以便返回数据需要发生的任何事情都在回调中发生。

一种实现方法是将回调传递给getPicsInFolder，如下所示：

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时，不要这样做：

pics = getPicsInFolder('foldername');

//do something with pics

做这个：

getPicsInFolder('foldername', function (pics) {

    //do something with pics

});

Answer 3

AJAX请求应该是异步的（你是能够在停止执行，并有效阻止UI的成本做同步的）。

getPicsInFolder()在AJAX请求完成之前返回。您需要更新UI /处理完成事件（作为参数传递给的匿名函数）返回的JSON对象$.get()：

$.get("", function ()

{

    // This anonymous function will execute once the request has been completed

    // Update your UI/handle your data here

});

假设我想更新UI中的元素...

$("#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

    });

});