Jquery :: Ajax powered progress bar?

Question

jquery의 ajax 함수를 사용하여 일부 메시지를 보내는 페이지가 있습니다.

보낼 메시지가 50KB 이상일 수 있습니다.

이 작업에는 다소 시간이 걸릴 수 있습니다.

내가하려는 일은 메시지가 전송되는 진행률 표시 줄을 보여주는 것입니다.

백엔드는 PHP입니다.

어떻게하면됩니까?

---

내 솔루션 : 원래의 ajax 호출에서 고유 식별자를 통해 보냅니다.
이 식별자는 완료 백분율과 함께 데이터베이스 (또는 식별자 등으로 명명 된 파일)에 저장됩니다.

원본 스크립트가 진행되면서 업데이트됩니다.

함수는 함수는 비율을 읽는 스크립트에 아약스 호출을 progress(ident)

라는 설정입니다.
progressbar가 업데이트되었습니다. 반환 된 비율이 100이 아니면
이 함수는 1 초 후에 자체를 호출하는 제한 시간을 설정합니다.

Answer 1

ajax 함수가 결과를 반환 할 때까지 .html()을 통해 애니메이션 gif로드를 결과 영역에 넣을 수 있습니다. 그냥 생각.

jquery UI 진행률 막대에 대해 간헐적으로 스크립트를 통해 할당 된 자바 스크립트 변수로 완료율을 나타내는 숫자 값을 표시합니다. 예를 들어 ...

// 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 성공에 막대의 값을 제공 할 수 있습니다. http://www.redips.net/javascript/ajax-progress-bar/

내가 그것을 테스트 할 수있는 방법이 없지만, 그것은 다음과 같이 가야한다 :

그렇지 않으면, 당신은 JS 프레임 워크를 사용하지 않는 경우이 참조

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

을 그리고 만들기 jQueryUI와 함께 jQuery를 포함하고 페이지의 어딘가에 #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); 
     } 
    });