如何在ajax请求期间显示进度条(jquery.php）

How to display a progress bar during an ajax request (jquery/php)

本文关键字：jquery php 显示 ajax 请求      更新时间：2023-09-26

我有一个ajax请求，通过该请求我将自动安装一个magento商店，当该过程完成时，它会将用户重定向到新创建的商店。这是我的代码：

   function postSuccessFormData() {
    var targetUrl = '/index.php/install/wizard/successPost';
    jQuery('.form-button').addClass('loading');
   setInterval(installStatus(),4000);
    jQuery.ajax({
        url: targetUrl,
        global: false,
        type: 'POST',
        data: ({
            finish: 1,
            password_key: jQuery('#password_key').val()
        }),
        async: true,
        dataType: 'json',
        error: function() {
            alert("An error has occurred. Please try again.");
        },
        success: function(data) {
            window.location.href = '/';
        }
    });
function installStatus() {
    var installerUpdatesUrl = '/index.php/install/wizard/installerStatus';
    //showProgressBar();
    jQuery.ajax({
        url: installerUpdatesUrl,
       // global: false,
        type: 'GET',
        async: true,
        dataType: 'json',
        error: function (data) {
          //  alert(data.result);
        },
        success: function (data) {
        handle data.result
        var dataKeys = Object.keys(data);
        var lastElementKey = dataKeys[dataKeys.length - 1];
        var lastMessage = data[lastElementKey]['message'];
       if(data[lastElementKey]['progress'] == '') {
            updateProgressBar(data[dataKeys[dataKeys.length - 2]]['progress'],100);
        }
            setting message
            jQuery("#message").html(lastMessage);
            if (data[lastElementKey]['state'] == 'Failure') {
                var stepStr = lastElementKey.split('_');
                var stepString = stepStr[0].toUpperCase() + ' ' + stepStr[1] + ':';
                alert(stepString + "'n" + data[lastElementKey]['message']);
                //hideProgressBar();
                jQuery('.form-button').removeClass('loading');
                return false;
            } else if (data[lastElementKey]['state'] == 'Finish') {
                alert(data[lastElementKey]['message']);
                //hideProgressBar();
                jQuery('.form-button').removeClass('loading');
                //window.location.href = '/';
            } else {
               // installStatus();
            }
        },
        complete: function () {
            installStatus();
            jQuery('.form-button').removeClass('loading');
        }
    });
}

这样做的方式：

每4秒钟运行一次函数installStatus，它将以JSON格式输出当前进度。我的问题是，这个函数需要与函数post（）同时执行。

这种情况不会发生，installStatus仅在第一个函数完成后运行。

怎么了？

当你定义installStatus时，你正在执行它

setInterval(installStatus(),4000);

需要

setInterval(installStatus, 4000);

新的XMLHttpRequest有一个很好的progress事件，您可以监听它来向用户显示上传进度。

这是一个很好的演示规范：https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

最初，您应该只调用installStatus（）一次，然后在ajax成功内部的方法中，您应该更新进度条中的进程，并以相同的方法递归调用它。在服务器端，您可以将当前进程保存在cookie中，每次递归调用都可以更新cookie并返回进程。

相关文章：