2014-05-13 3 views
5

아약스 요청에 대해 % 완료를 받아야합니다. JQuery Ajax 백분율로 요청

나는 다음과 같은 시도 :

$(document).ready(function() { 
    $.ajax({ 
     xhr : function() { 
      var xhr = new window.XMLHttpRequest(); 
      xhr.upload.addEventListener("progress", function(evt) { 
       if (evt.lengthComputable) { 
        var percentComplete = (evt.loaded/evt.total) * 100; 
        //Do something with upload progress here 
       } 
      }, false); 

      xhr.addEventListener("progress", function(evt) { 
       if (evt.lengthComputable) { 
        var percentComplete = (evt.loaded/evt.total) * 100; 
        //Do something with download progress 
        console.log(percentComplete);  
       } 
      }, false); 

      return xhr; 
     }, 
     url : my_path 
    }).done(function(data) { 

     console.log(data); 
    }); 
}); 

문제는 내가 위의 코드가 작동 여부 확인합니까 방법이다. 나는 방화 벽 콘솔에서 항상 100을 얻었지만 100 대신 콘솔에 복수 % 항목이 있어야합니다.

my_path은 MySQL DB에서 레코드를 반환하는 PHP 페이지입니다. 기능을 확인하기 위해 프로세스/페이지 렌더링 속도를 늦출 수있는 방법이 있습니까?

+1

가능한 복제본 http://stackoverflow.com/questions/16690740/how-to-show-loading-status-in-percentage-for-ajax-response – Manibharathi

+0

@Manibharathi 이미 해당 기능을 구현했으며 확인해야합니다. 페이지 렌더링 또는 db 작업을 느리게하여 % 기능을 사용 하시겠습니까? – user3555483

+0

로컬 시스템에서 사용하셨습니까? – Manibharathi

답변

3

DB 읽기를 사용할 때의 문제점은 먼저 알아야 할 필요가 있으므로이 파일을 테스트하려면 파일이 필요합니다.

다운로드 (서버에서 클라이언트 다운로드)의 경우 지연을 도입해야합니다. 그렇지 않으면 거대한 파일을 다운로드하는 것이 좋습니다.

this script 올바른 콘텐츠 길이 헤더를 설정하고 한 번에 50 바이트 만 출력하고 1 초 지연 (비교적 작은 파일 woot로 테스트 할 수 있음)을 시도해보십시오.

업로드 (서버에 게시)와 관련하여이 옵션은 큰 파일로 만들고 완료되면 버릴 수 있습니다.