在單獨的函數中使用通過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); 
});