我的问题

我的jquery ajax请求已被触发，但是在我使用浏览器停止页面之前，成功函数才会运行。

我尝试了什么

我在整个地方都设置了标记来跟踪ajax函数的进度。一切正常，但成功功能在我停止页面之前不会运行。这是我的JS：

var submitted = '';
var freq =3000; // freqency of update in ms
var counter = 0;

$('#webfileuploadform').submit(function(){

    $(document).ajaxSend(function(){
        console.log("Triggered ajaxsend handler.")
    });

    if(submitted == 'submitted') return false; // prevents multiple submits
    var progress_url = '/upload_progress/' + $('#id_progress_id').val(); // ajax view serving progress info
    var progress_guid = $('#id_progress_id').val();
    this.action += (this.action.indexOf('?') == -1 ? '?' : '&') + 'X-Progress-ID=' + progress_guid;

    var $progress = $('<div id="upload-progress" class="upload-progress"></div>').appendTo($('#webfileuploadform')).append('<div class="progress-container"><div class="progress-info">uploading 0%</div><div class="progress-bar"></div></div>');

    function update_progress_bar(){
        console.log("update_progress_bar() was hit");
        $progress.show();
        $.ajax({
            dataType:"json",
            url: progress_url,
            beforeSend: function(){
                console.log('before send');
            },
            success: function(data){
                //debugger;
                if(data.status == "uploading"){
                    var total_progress = parseInt(data.uploaded) / parseInt(data.length);
                    var width = $progress.find('.progress-container').width();
                    var progress_width = width * total_progress;
                    $progress.find('.progress-bar').width(progress_width);
                    $progress.find('.progress-info').text('uploading ' + parseInt(total_progress*100) + '%');
                    counter++;
                    console.log("status: " + data.status + counter);
                    //console.log("data.length " + data.length);
                    //console.log("data.uploaded " + data.uploaded);
                    //console.log("progress_width " + progress_width + '\n');
                } else if (data.status == "not-found") {
                    clearTimeout(progress_bar_updater);
                    console.log("status = not-found");
                } else {
                    clearTimeout(progress_bar_updater);
                    console.log("data.status = " + data.status);
                }
            },
            error: function(textStatus){
                console.log("ERROR: " + textStatus);
            },
            complete: function(jqXHR, textStatus){
                console.log(textStatus);
            }
        });
        var progress_bar_updater = setTimeout(function(){update_progress_bar()}, freq);
    }

    window.setTimeout(function(){update_progress_bar()}, freq);

    submitted = 'submitted'; // marks form as submitted

});

你可以看到我的所有旗帜。我使用我的表单选择要上传的文件，我提交表单，控制台如下所示：

update_progress_bar() was hit
before send
Triggered ajaxsend handler.

所以这意味着我的函数包含ajax调用正在被触发，ajax请求也是如此，因为beforeSend和ajaxSend函数都输出了它们的内容。另请注意，错误功能没有输出任何内容，因此没有问题。现在奇怪的部分。我按下Chrome中的停止按钮，控制台输出现在返回：

update_progress_bar() was hit
before send
Triggered ajaxsend handler.
status: uploading1
success

现在，在页面停止后，整个ajax函数运行时没有错误。成功功能输出到控制台，完整功能也是如此。错误功能仍然没有输出。

由于我在函数内部调用了setTimeout，它会迭代直到我刷新页面（或者，根据我按下提交后多长时间然后在浏览器中按下停止，它已经读取了django中的所有临时数据文件上传处理程序）每次输出到控制台，直到它最终输出“not-found”（这是文件的结尾）。

我想要完成的事情

我的表单是供用户将大文件上传到服务器的。我想要一个进度条，以防止用户认为浏览器冻结然后重新加载文件。停止页面后，进度条工作正常。背景和“上传0％”都会按原样递增。但就在我停止页面之前。

它应该在服务器读取文件时递增。为什么不呢？

Answer 1

在ajax函数中，我将async设置为false：

$.ajax({
    async: false,
    ...
});

这解决了这个问题。我不知道怎么做。据我所知，此设置强制ajax请求等待所有其他http请求完成后再允许它继续。在这种情况下，我不知道这是如何工作的。我不会回答我自己的问题，以防有人知道为什么这样做......

ajax请求已触发但成功函数在我停止页面之前不会启动

我的问题

我尝试了什么

我想要完成的事情

1 个答案: