如何使 AJAX 对进度条进行动画处理

Question

我有一个PHP页面显示1%...2%.....3%.....等，带有输出缓冲区。

如何让 ajax 检测这些更改并使它们反映在进度条的宽度 CSS 属性中？

$.ajax({
        type: "POST",
       url: "iopio.php",
       success: function(html){ 
         if (html != '100%') {
            $('#mainBar').animate({width:html});
            $('#status').text("Working.");
         }
        }

    });

Answer 1

您正在做的是读取一次内容，因此您每次都会得到一个静态答案，使用这种技术，您需要设置一个循环 ping 事件来保持更新，如下所示：

function pingProgress(){
    $.ajax({
        type: "POST",
        url: "iopio.php",
        success: function(html){ 
            if (html != '100%') {
                $('#mainBar').animate({width:html});
                $('#status').text("Working.");
                pingProgress();
            }
        }
    });
}
//Start loop
pingProgress();

这专门循环调用函数，直到达到 100%。为了保存数据，您可以考虑添加超时函数等。