在单独的函数中使用通过AJAX检索的JSON数据

Question

如果这是一个重复的问题，我抱歉道歉，我已经从另一个似乎没有帮助我的问题开始。我试图检索一些JSON数据，将部分数据存储到变量中，并在AJAX请求之外的单独函数中使用该变量。

我从JSON数据预期的响应是http://localhost:8000/tutorials/retrieve/?page=2（此反应表明，如果我登录的AJAX代码内部的变量），但是实际的响应我收到的时候我尝试登录该变量从另一个函数如下：

n.Event {originalEvent：的MouseEvent，键入： “点击”，时间戳：1436727171161，jQuery21304066238570958376：真，toElement：DIV＃loadmore.recentTutorials ...}

下面是当前的代码

var recentFirstPage = ''; 

function retrieveTutorials(){ 
    $.ajax({ 
    type: "GET", 
    url: "/tutorials/retrieve", 
    dataType: "json", 
    success: function(data){ 
    **some unrelated parsing code here** 
     //Set the variable to what I need 
     recentFirstPage = data.next_page_url; 
    }, 
    error: function() { 
     alert("An error occurred processing AJAX request."); 
    } 
}); 
} 

$('#main-content-wrap').on('click', '.recentTutorials', function(recentFirstPage){ 

     //Does not return expected result 
     console.log(recentFirstPage); 
}); 

当我点击.recentTutorials我希望控制台从JSON记录数据，但它不。有人可以帮助清理我的错误吗？

Answer 1

它不记录来自JSON的数据表明该调用是异步的。这意味着function将执行从上到下而不等待呼叫完成。

使用的一种方法是利用deferred对象，该对象在完成时返回promise。您可以接受调用者函数的匿名函数，以便在点击范围内执行回调。

观察：

function retrieveTutorials(){ 
    return $.ajax({ 
     type: "GET", 
     url: "/tutorials/retrieve", 
     dataType: "json" 
    }); 
} 

$('#main-content-wrap').on('click', '.recentTutorials', function(){ 

    //store our function call as an ajax promise 
    var promise = retrieveTutorials(); 

    //wait for the ajax to return so we can mutate the data 
    promise.done(function(data){ 
     //now our data will be properly 
     recentFirstPage = data.next_page_url; 
    }); 

}); 

Answer 2

在点击处理函数的参数是你的棺材的最后一个和最后一颗钉子。它始终是jquery事件，你不应该处理它。

您确实需要在处理程序中调用retrieveTutorials（）函数，并且您需要向它传递一个将在成功时执行的回调函数。所以，你的retrieveTutorials（）函数将是这个样子：

function retrieveTutorials(success){ 
    $.ajax({ type: "GET", url: "/tutorials/retrieve", 
     dataType: "json", 
     success: success, 
     error: function() { alert("An error occurred processing AJAX request."); 
} }); } 

而且你的点击处理程序：

$('#main-content-wrap').on('click', '.recentTutorials', function(){ 
    retrieveTutorials(function(data){ 
     console.log(data.next_page_url); 

    }); 

}); 

您也可以使用所有的承诺基于善在其他anwers，但上面会一个你会一次又一次看到的成语。

Answer 3

在我看来，你正在尝试在ajax完成之前记录数据。最好使用deferreds。试试这个：

function retrieveTutorials(){ 
    return $.ajax({ // will return deferred object 
    type: "GET", 
    url: "/tutorials/retrieve", 
    dataType: "json", 
    success: function(data){ 
    **some unrelated parsing code here** 
     //Set the variable to what I need 
     recentFirstPage = data.next_page_url; 
    }, 
    error: function() { 
     alert("An error occurred processing AJAX request."); 
    } 
}); 
} 

$.when(retrieveTutorials()).done(function (data) { 
    console.log(recentFirstPage); 
});