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