Question

我有一个上传按钮，当点击调用ajax函数上传文档时。一旦该函数运行，我调用另一个ajax函数来刷新显示我所有文档的屏幕上的表。我一直在看这个问题 - Wait until all jQuery Ajax requests are done?

这似乎是我需要的。但是，我不确定如何实现我当前的代码。我有：

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

Answer 1

您可以使用回调机制。

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

然后你可以将函数链称为：

doUpload(refreshTable);

Answer 2

编辑：@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();
        }
    }

等待jQuery AJAX调用完成

2 个答案: