Ajax加载栏功能答案

【问题标题】：Ajax loading bar functionAjax加载栏功能
【发布时间】：2016-04-20 09:21:01
【问题描述】：

我知道有一些关于此的帖子，但它们没有涵盖我需要实现的目标。

我正在尝试让类似 youtube 的加载栏正常工作。

我发现了这个：

var data = [];
for (var i = 0; i < 100000; i++) {
    var tmp = [];
    for (var i = 0; i < 100000; i++) {
        tmp[i] = 'hue';
    }
    data[i] = tmp;
};

       xhr: function () {
                var xhr = new window.XMLHttpRequest();
                var percentComplete = 0; <--------------------------added this
                $('.progress').removeClass('hide');<----------------and this
                xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);
                        $('.progress').css({
                            width: percentComplete * 100 + '%'
                        });
                        if (percentComplete === 1) {
                            $('.progress').addClass('hide');
                        }
                    }
                }, false);
                xhr.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);

                        $('.progress').css({
                            width: percentComplete * 100 + '%'
                            });
                    }
                }, false);
                return xhr;
            }

我添加了 2 行，因为它只会工作一次，因为隐藏值在完成后没有被删除。也将宽度设置回 0。我也喜欢它接缝来计算事件的实际百分比。

这很好用。但是，我想把它变成一个函数，可以像这样为我的所有 ajax 调用调用：

$(document).ready(function () {
    $("a").on("click", function (event) {
        event.preventDefault();
        var id = ($(this).attr("id"));
        var container = ($(this).attr("data-container"));
        var link = ($(this).attr("href"));
        var text = ($(this).text());
        var html = ($(this).html());
        MY_LOADING_BAR_FUNCTION();<-----------------------------------Here i guess?
        $.ajax({

            url: 'ajax-php.php',
            type: 'post',
            data: { 'action': 'click', 'id': id, 'text': text, 'link': link, 'html': html },
            success: function (data, status) {
                if (container == '#formbox') {
                    $("#screen").addClass("visible");
                }
                $(container).html(data);
            },
            error: function (xhr, desc, err) {
                console.log(xhr);
                console.log("Details: " + desc + "\nError:" + err);
            }
        }); // end ajax call
    }); // end on click
}); // en document ready

但我也遇到了像这样的 Ajax 设置。

   $.ajaxSetup({
    beforeSend: function() {

    },
    complete : function() {

    }
});

现在我通过将 xhr: function () 的整个代码放入我的 ajax 调用中来让它工作。但我不想每次都这样做。

所以这些是我发现的 2 个可以工作的选项，但我无法让它们按我想要的方式工作。我尝试创建一个MY_LOADING_BAR_FUNCTION()，但我收到了一个已弃用的错误。

谁能告诉我如何进行这项工作。

谢谢大家！

【问题讨论】：

喜欢 youtube？这不是一个单一的请求。这是很多要求。首先，所有请求都应添加到“队列”中。成功后，每个请求都应该更新加载栏。为了改进，您可以设置每个请求的百分比权重。
不！这是将 Json 数组发送到 php 文件的单个请求！？

标签： javascript jquery ajax

【解决方案1】：

回复晚了，但值得分享一些知识，让其他人可以从中得到帮助。

您可以如下扩展 jQuery AJAX XHR 对象。

jQuery.ajaxSettings.xhr = function ()
{
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            //Do something with upload progress
            console.log('percent uploaded: ' + (percentComplete * 100));
        }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            //Do something with download progress
            console.log('percent downloaded: ' + (percentComplete * 100));
        }
    }, false);
    return xhr;
}

【讨论】：