Question

在表单提交的情况下，我有一个jquery ajax函数，用于查询从我可用于创建进度条的文件上传的数据量。这是我的js文件：

var submitted = '';
var counter = 0;

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

    if(submitted == 'submitted') return false; // prevents multiple submits

    var freq = 1000; // freqency of update in ms
    var progress_url = '/upload_progress/' + $('#id_progress_id').val(); // ajax view serving progress info

    update_progress_bar();

    function update_progress_bar(){
        $.ajax({
            dataType:"json",
            url: progress_url,
            success: function(data){
                    counter ++
                console.log('hit success ' + counter);
            },
            complete: function(jqXHR, status){
                if (status == 'success'){
                    console.log('hit complete', status == success')
                } else {
                    console.lot('hit complete', status == something else')
                }
            }
        });
        setTimeout(function(){update_progress_bar()}, freq);
    }

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

});

因此，用户将使用表单选择文件，然后单击“提交”。这一切都很好。表单提交，文件上传，当我在单独的选项卡中打开ajax视图并继续刷新时，进度显示正常。我不明白为什么update_progress_bar函数运行一次，直到我停止页面。我将上传一个文件，但在我点击浏览器上的“x”之前，我的控制台中没有任何“点击成功”。在我停止后，控制台吐出“命中成功”加上计数器。但我不应该停止这样做。我需要在文件上传时才能使用它。

任何想法我的问题是什么？

**

修改

**

不确定它是否有所作为，但我在django开发服务器上做了所有这些。我认为在同一会话中两个XMLHTTPRequests不应该有问题。

Answer 1

试试这个：

var $submitted = '';

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

    if($submitted == 'submitted') return false; // prevents multiple submits

    var freq = 1000; // freqency of update in ms

    update_progress_bar();

    function update_progress_bar(){
        var progress_url = '/upload_progress/' + $('#id_progress_id').val(); // ajax view serving progress info

        $.ajax({
            dataType:"json",
            url: progress_url,
            success: function(data){
                console.log("hit success");
            },
            complete:function(jqXHR, status) {
                if (status == 'success') {
                    setTimeout(update_progress_bar, freq);
                }
            }
        });
    }

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

});

Answer 2

就目前而言，代码对我来说很好。我会添加一些控制台日志记录，以确保ajax调用以您期望的状态返回：

complete:function(jqXHR, status) {
    console.log('got to complete, status: ', status);
    if (status == 'success') {
         console.log('status is success, calling setTimeout.');
         setTimeout(update_progress_bar, freq);
    }
}

Answer 3

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

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

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

在我停止页面之前，setTimeout不会启动

修改

3 个答案: