Question

我想了解有关进度条的更多信息。我知道他们使用文件上传，因为你知道它的大小。但是，如果我没有文件，但有些代码要用jquery / ajax执行，我想用进度条显示进度。可能吗？为了向您提供更多详细信息，我的代码会在多个网站上获取许多数据，对其进行转换并最终将它们保存到数据库中。

编辑：以下是我的ajax调用示例：

function submit_form(form, link, file, button)
{
    var form_data = $(form).serialize();
    $.ajax
    ({
        url: link,
        type: 'POST',
        dataType: 'json',
        data: form_data,
        success: function(result)
        {
             handle_result(form, result, link, button);
        }
    });
}

Answer 1

jQueryUI Progressbar docs表示您可以自行设置进度条的值：

$( ".selector" ).progressbar( "value", 50 );

因此，解决问题的一种方法是：如果您知道正在执行的操作数（获取数据，转换，写入数据库），那么每次完成其中一个时，您可以增加Progressbar的值： / p>

var completed = 0;
var total = 10;

doSomething().done(function(result) {
  completed++;
  $("#progress-bar").progressbar("value", 100 * (completed / total));
});

Answer 2

阅读有关$ .ajax（）函数和XMLHttpRequest对象的xhr选项的更多信息。您需要关注的是向其添加“progress”事件监听器。您也可以尝试一些现成的解决方案，例如jquery的Reload Progress Bar插件，它扩展了$ .ajax（）函数，以便您可以对任何Ajax请求使用进度条。

自定义代码的进度条（无文件上传）

2 个答案: