Ajax加载栏function

我知道有一些关于这个的post，但他们没有涵盖我需要实现的目标。

我正试图让youtubelike装载栏正常工作。

我发现了这个：

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.我也喜欢它接缝计算事件的实际百分比。

这很有效。 Howerver，我想把它变成一个可以为我所有的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调用中来实现它。 但我不想每次都这样做。

所以这些是我发现可以工作的两个选项，但我不能让它们以我想要的方式工作。 我尝试制作MY_LOADING_BAR_FUNCTION()但我得到了一个弃用的错误。

谁能告诉我如何让这项工作取悦。

谢谢大家！

Answer 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; }