等待jQuery AJAX調用完成

我有一個上傳按鈕，當點擊調用ajax函數來上傳文檔時。一旦該函數運行，我調用另一個Ajax函數刷新顯示所有文檔的屏幕。我一直在看這個問題 - Wait until all jQuery Ajax requests are done?等待jQuery AJAX調用完成

這似乎是我所需要的。不過，我不確定如何實現我當前的代碼。我有：

$("#UploadButton").on('click', function() { 
      doUpload(); // My First AJAX function 
      refreshTable(); // My Second AJAX Function 
     });

我doUpload AJAX功能如下：然後

function doUpload() { 
      $.ajax({ 
       url: 'myupload url', 
       type: 'POST', 
       data: new FormData($('#uploadForm')[0]), 
       processData: false, 
       contentType: false, 
       success: function() { 
        $.growlUI('Document Uploaded Sucessfully'); 
       }, 
       error: function (xhr, ajaxOptions, thrownError) { 
        alert(xhr.status + " " + thrownError); 
       } 
      }); 
     }

我refreshTable AJAX功能是：

function refreshTable() { 
    $.ajax({ 
     url: 'url to get all files', 
     type: 'GET', 
     data: $('#searchForm').serialize(), 
     success: function (data) { populateTable(data); }, 
     error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status + " " + thrownError); } 
    }); 
    return false; 
}

如果我上傳的文件與當前解決方案的成功功能的refreshTable似乎打得太快，它沒有找到最近上傳的文件。我試圖在我的doUpload的成功函數中添加對refreshTable（）的調用，其setTimeout爲5秒，有時這是工作並刷新表，但有時不上載表。

我再變單擊處理程序上的按鈕下面的嘗試具有的功能其他SO回答我掛上面有但心不是工作要麼

$("#UploadButton").on('click', function() { 
      $.when(doUpload()).done(function() { 
       refreshTable();     
      }); 
     });

來源

2014-11-02 TheRiddler

可以使用回調機制。

function doUpload(callback) { 
    $.ajax({ //some parameters 
     success: function (data) { 
      //do some work here 
      callback(); 
     } 
    ); 
}

然後，你可以調用該函數鏈：

doUpload(refreshTable);

來源

2014-11-02 21:12:27

我會嘗試這一點，並讓你知道，如果它 – TheRiddler 2014-11-02 21:24:40

回調似乎是工作，但刷新表功能仍然擊中到儘早拿起新上傳的文件 - 無論如何，我可以在回調執行之前添加額外的延遲嗎？ – TheRiddler 2014-11-02 21:40:42

JS中有'setTimeout'函數，但我提供的代碼應該適合你。你確定你沒有添加'refreshTable'的'（）'嗎？ – 2014-11-02 21:52:38

-1

編輯：@qamyoncu答案是比我好。

在AJAX中，調用是異步完成的。這就是爲什麼你沒有得到你想要的東西。

這是一個棘手的解決方案，以避免您有問題：

function doUpload(init) { 
     var res = null; 
     var _init = init || false; 

     if (!_init) { 
      _init = true; 
      $.ajax({ 
       /// ajax call for doUpload()... 
      }); 
     } 

     if (res == null) { 
      setTimeout(function(){ doUpload(_init); }, 100); 
     } else { 
      refreshTable(); 
     } 
    }

來源

2014-11-02 21:15:59 Sw0ut

等待jQuery AJAX調用完成

回答

相關問題