Question

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

我对json数据的预期响应是http://localhost:8000/tutorials/retrieve/?page=2（这个响应显示我是否记录了AJAX代码中的变量）但是当我尝试从另一个函数记录变量时得到的实际响应如下：

n.Event {originalEvent：MouseEvent，type：“click”，timeStamp：1436727171161，jQuery21304066238570958376：true，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的{{1}}个对象。您可以接受调用函数的匿名函数，以便在单击范围内执行它的回调。

观察：

promise

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);

    });

 });

你也可以在其他食堂中使用所有基于承诺的善意，但上面会是你会一次又一次看到的成语。

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);  
});

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

3 个答案: