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

The server I'm developing on is the Django 1.4 development server on Open-SUSE.

我正在开发的服务器是Open-SUSE上的Django 1.4开发服务器。

My Problem

My jquery ajax request is triggered, but the success function does not run until I stop the page with my browser.

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

What I've tried

I've set up flags all over the place to track the progress of the ajax function. Everything is working correctly, but the success function does not run until I stop the page. Here's my JS:

我在整个地方设置了标记来跟踪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

});

You can see all my flags. I use my form to select a file to upload, I submit the form, and the console reads as follows:

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

update_progress_bar() was hit
before send
Triggered ajaxsend handler.

So this means my function containing the ajax call is being triggered, and so is the ajax request because the the beforeSend and ajaxSend functions both output their contents. Also note, the error function did not output anything so there wasn't a problem. Now the weird part. I press the stop button in Chrome and the console output now returns this:

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

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

So now, after the page was stopped, the entire ajax function runs without error. The success function outputs to the console and so does the complete function. The error function still output nothing.

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

Because of the setTimeout I have called inside the function, it iterates until I refresh the page (or, depending on how long after I pressed submit and then pressed stop in the browser, it has read all the temporary data from the django file upload handler) outputting to the console each time until it finally outputs "not-found" (which is the end of the file).

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

What I'm trying to accomplish

My form is for users to upload large files to the server. I want a progress bar to prevent users from thinking that the browser froze and then re-load the files. The progress bar works just fine after I stop the page. The background and "uploading 0%" all increment as they should. But just not until I stop the page.

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

It should increment as the file is being read by the server. Why isn't it?

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

1 个解决方案

#1

In the ajax function I set the async setting to false:

在ajax函数中,我将async设置为false:

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

This has solved the problem. I have no idea how. From what I understand, this setting forces the ajax request to wait until all other http requests are finished before allowing it to continue. With that being the case, I have no idea how this works. I'll keep from answering my own question in case someone knows why this is working this way...

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

#1