Jquery :: Ajax支持进度条吗？

Question

我有一个页面，它使用jQuery的ajax函数发送一些消息。

可能会有超过50k消息发送。

明显需要一些时间。

我正在做的是显示正在发送的消息的进度条。

后端是PHP。

我该怎么做？

---

我的解决方案： 在原始ajax调用中发送唯一标识符。
此标识符存储在数据库（或以标识符等命名的文件）中，以及完成百分比。

这是随着原始脚本的进行而更新的。

的功能是建立所谓的progress(ident)

该功能使一个AJAX调用的脚本读取的百分比。
进度条更新 如果返回的百分比不是100,
该函数设置1秒后自动调用的超时。

Answer 1

您可以通过.html()将动画gif加载到结果区域，直到您的ajax函数返回结果为止。只是一个想法。

关于jquery ui进度条，间歇性地通过你的脚本，你会想要回显一个数值代表完成百分比作为一个分配的JavaScript变量。例如...

// text example php script 
if (isset($_GET['twentyfive-percent'])) { 
    sleep(2); // I used sleep() to simulate processing 
    echo '$("#progressbar").progressbar({ value: 25 });'; 
    } 
if (isset($_GET['fifty-percent'])) { 
    sleep(2); 
    echo '$("#progressbar").progressbar({ value: 50 });'; 
    } 
if (isset($_GET['seventyfive-percent'])) { 
    sleep(2); 
    echo '$("#progressbar").progressbar({ value: 75 });'; 
    } 
if (isset($_GET['onehundred-percent'])) { 
    sleep(2); 
    echo '$("#progressbar").progressbar({ value: 100 });'; 
    } 

而下面是我用来获取进度条更新其位置的函数。我知道一点点坚果。

avail_elem = 0; 
function progress_bar() { 
    progress_status = $('#progressbar').progressbar('value'); 
    progress_status_avail = ['twentyfive-percent', 'fifty-percent', 'seventyfive-percent', 'onehundred-percent']; 
    if (progress_status != '100') { 
     $.ajax({ 
      url: 'test.php?' + progress_status_avail[avail_elem], 
      success: function(msg) { 
       eval(msg); 
       avail_elem++; 
       progress_bar(); 
       } 
      }); 
     } 
    } 

如果我不得不猜测，我敢打赌有一个更好的办法......但这是我测试它时对我的工作方式。

Answer 2

检查这个，如果你使用jQuery： http://docs.jquery.com/UI/Progressbar

您只需提供在每个AJAX成功吧的价值。

否则，如果你不使用JS框架看到这一点： http://www.redips.net/javascript/ajax-progress-bar/

我没有办法测试它，但它应该是这样的：

var current = 0; 
    var total = 0; 
    var total_emails = <?php $total_emails ;?>; 

    $.ajax({ 

     ... 
     success: function(data) { 
     current++; // Add one to the current number of processed emails 
     total = (current/total_emails)*100; // Get the percent of the processed emails 
     $("#progressbar").progressbar("value", total); // Add the new value to the progress bar 
     } 
    }); 

而且使确保你将包含jQuery和jQueryUI，然后在页面上的某处添加#progressbar容器。

虽然我可能有一些错误... 您可能需要将总数加起来，特别是如果您有很多电子邮件。

Answer 3

Use this answered question

这是我是如何实现它：

var progressTrigger; 
    var progressElem = $('span#progressCounter'); 
    var resultsElem = $('span#results'); 
    var recordCount = 0; 

    $.ajax({ 
     type: "POST", 
     url: "Granules.asmx/Search", 
     data: "{wtk: '" + wkt + "', insideOnly: '" + properties.insideOnly + "', satellites: '" + satIds + "', startDate: '" + strDateFrom + "', endDate: '" + strDateTo + "'}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "xml", 
     success: function (xml) { 
      Map.LoadKML(xml); 
     }, 
     beforeSend: function (thisXHR) { 
      progressElem.html(" Waiting for response from server ..."); 
      ResultsWindow.LoadingStart(); 

      progressTrigger = setInterval(function() { 
       if (thisXHR.readyState > 2) { 
        var totalBytes = thisXHR.getResponseHeader('Content-length'); 
        var dlBytes = thisXHR.responseText.length; 
        (totalBytes > 0) ? progressElem.html("Downloading: " + Math.round((dlBytes/totalBytes) * 100) + "%") : "Downloading: " + progressElem.html(Math.round(dlBytes/1024) + "K"); 
       } 
      }, 200); 


     }, 
     complete: function() { 
      clearInterval(progressTrigger); 
      progressElem.html(""); 
      resultsElem.html(recordCount); 
      ResultsWindow.LoadingEnd(); 
     }, 
     failure: function (msg) { 
      var message = new ControlPanel.Message("<p>There was an error on search.</p><p>" + msg + "</p>", ControlPanel.Message.Type.ERROR); 
     } 
    });