我想更新进度条，因为响应来自 ajax答案

【问题标题】：I want to update progress bar as the response come through ajax我想更新进度条，因为响应来自 ajax
【发布时间】：2019-12-16 10:45:32
【问题描述】：

我想用每个响应更新进度条，但是使用这段代码我一次收到很多响应，最后一个数字更新进度条。但我无法在我的成功函数中得到每一个响应，我也尝试了 async:false 但由于此响应正在获取但进度条仅在最后响应进度条更新时才更新。

function BindTable(jsondata, tableid) {
    /*Function used to convert the JSON array to Html Table*/
    var columns = BindTableHeader(jsondata, tableid); /*Gets all the column headings of Excel*/
    //Random Id Generation 
    var random = //Some Random Number
    var i = 0;
    for (; i < jsondata.length; i++) {
        var jData = {};
        for (var colIndex = 0; colIndex < columns.length; colIndex++) {
            var cellValue = jsondata[i][columns[colIndex]];
            // console.log(cellValue)
            jData[colIndex] = cellValue;
            if (cellValue == null)
                cellValue = "";
        }
        // console.log(jData);
        var jsonData = JSON.stringify(jData);
        console.log(jsonData);
        $.ajax({
            url: URL of PHP File,
            async: true,
            timeout: 30000,
            data: {
                "data": jsonData,
                "random": random,
                "current": i,
                "last": jsondata.length
            }, //<--- Use Object
            type: "POST",
            success: function (response, textStatus, hxr) {
                $('.progress-bar').css('width', response + '%').attr('aria-valuenow', response);
                if (response != 100)
                    $('#prvalue').html(response + '% Complete')
                if (response == 100)
                    $('#prvalue').html(response + '% Complete (Success)')
                console.log(response);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log("The following error occured: " +
                    textStatus, errorThrown);
            }
        });

    }
}

这是控制台输出： enter image description here

ExcelUpload.js:140 20
ExcelUpload.js:140 24
ExcelUpload.js:140 4
ExcelUpload.js:140 8
ExcelUpload.js:140 16
ExcelUpload.js:140 12
ExcelUpload.js:140 44
ExcelUpload.js:140 36
ExcelUpload.js:140 40
ExcelUpload.js:140 28
ExcelUpload.js:140 48
ExcelUpload.js:140 32
ExcelUpload.js:140 72
ExcelUpload.js:140 68
ExcelUpload.js:140 56
ExcelUpload.js:140 64
ExcelUpload.js:140 52
ExcelUpload.js:140 60
ExcelUpload.js:140 84
ExcelUpload.js:140 96
ExcelUpload.js:140 88
ExcelUpload.js:140 80
ExcelUpload.js:140 92
ExcelUpload.js:140 76
ExcelUpload.js:140 100

【问题讨论】：

在收到服务器响应后，您将在success 中获取数据，您不能使用success 作为进度条
多个ajax请求在更新状态栏时会相互竞争
见：Monitoring progress。这是an example for usage with JQuery。
统计会请求的ajax个数我猜是jsondata.length，然后使用success回调实现一个计数器，刷新进度条上的数据。我建议使用.done和.无法处理计数器
@gmazoni 你能给我举个例子吗？

标签： php jquery ajax codeigniter

【解决方案1】：

您可以尝试与异步一起使用的示例代码：您可以使用.toFixed(0) 获取整数

function BindTable(jsondata, tableid) {
var columns = BindTableHeader(jsondata, tableid); /*Gets all the column headings of Excel*/
//Random Id Generation 
var random = 7; //Some Random Number
var progress = 0;

for(i = 0; i < jsondata.length; i++) {
    var jData = {};
    for (var colIndex = 0; colIndex < columns.length; colIndex++){
        var cellValue = jsondata[i][columns[colIndex]];
        jData[colIndex] = cellValue;
        if (cellValue == null) cellValue = "";
    }

    var jsonData = JSON.stringify(jData);
    console.log(jsonData);
    $.ajax({
        url: '', //URL of PHP File,
        async: true,
        timeout: 30000,
        data: {"data": jsonData,"random": random,"current": i,"last": jsondata.length},
        type: "POST"
    }).done(function(response, textStatus, hxr){
        progress = progress + 1;
        relative = ( progress * 100) / jsondata.length;

        $('.progress-bar').css('width', relative + '%').attr('aria-valuenow', relative);

        if (progress == jsondata.length){
            $('#prvalue').html(relative + '% Complete (Success)')
        }else{
            $('#prvalue').html(relative + '% Complete')
        }

        console.log(response, relative);

    }).fail(function (jqXHR, textStatus, errorThrown) {
        console.log("The following error occured: " + textStatus, errorThrown);
    })

   }
}

【讨论】：