javascript - PHP 如何刷新 HTML 代码中的 ProgressBar？

Question

我的 index.html 中有一个表单，它在提交时调用 jQuery 函数。此 jQuery 函数执行 AJAX 请求来运行 PHP 脚本。

我希望 PHP 脚本与 HTML 交互(目标是刷新进度条)。

我的问题是，在使用 AJAX 运行 PHP 脚本时，它是在后台执行的。事实上我不希望页面在 PHP 处理过程中刷新。

我画了一张图。

我怎样才能实现这个目标？

Answer 1

我认为你的意思是进度条应该由上传过程填充。你可以这样做

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                $('#progress').text(percentComplete + '%').css('width', percentComplete + '%');
            }
       }, false);

       // Download progress
       xhr.addEventListener("progress", function(evt){
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total;
               $('#progress').text(percentComplete + '%').css('width', percentComplete + '%');
           }
       }, false);

       return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data){
        // Do something success-ish
    }
});