일반적인 자바 스크립트는 매우 간단합니다 : 콜백을
{XMLHTTPRequest}.onprogress
에 연결하기 만하면됩니다.
var xhr = new XMLHttpRequest();
xhr.onprogress = function(e){
if (e.lengthComputable)
var percent = (e.loaded / e.total) * 100;
};
xhr.open('GET', 'http://www...', true);
xhr.onreadystatechange = function() {
...
};
xhr.send(null);
그러나 JQuery로 html 데이터를 다운로드하는 아약스 사이트를 만들고 있습니다 (
$.get()
또는
$.ajax()
) 그리고 작은 진행률 표시 줄로 요청을 표시하기 위해 요청 진행률을 얻는 가장 좋은 방법이 궁금합니다.하지만 궁금한 점은 JQuery 설명서에서 유용한 것을 찾지 못했습니다 ...
- 답변 # 1
- 답변 # 2
jQuery는 이미 약속을 구현 했으므로이 기술을 사용하고 이벤트 로직을
options
로 옮기지 않는 것이 좋습니다. 매개 변수. 진행 약속을 추가하는 jQuery 플러그인을 만들었고 이제 다른 약속처럼 쉽게 사용할 수 있습니다.$.ajax(url) .progress(function(){ /* do some actions */ }) .progressUpload(function(){ /* do something on uploading */ });
github에서 확인
- 답변 # 3
jQuery에는
AjaxSetup()
가 있습니다.beforeSend
와 같은 전역 아약스 핸들러를 등록 할 수있는 기능 그리고complete
모든 아약스 통화와xhr
에 액세스 할 수 있습니다 당신이 찾고있는 진전을 이루기 위해 객체 - 답변 # 4
Ajax 객체의 구성을 가로채는 세 가지 방법에 대해 시도했습니다 :
<올>첫 번째 시도에서
xhrFields
를 사용했습니다 하지만 하나의 리스너 만 허용하고 다운로드 (업로드 아님) 진행에만 연결하며 불필요한 복사하여 붙여 넣기처럼 보이는 것이 필요합니다.두 번째 시도는
progress
를 첨부 반환 된 약속에 함수를 사용하지만 자체 처리기 배열을 유지해야했습니다. 한 곳에서 XHR에 액세스 할 수 있고 다른 곳에서 jQuery XHR에 액세스 할 수 있기 때문에 처리기를 연결할 좋은 객체를 찾을 수 없었지만 지연 된 객체에는 액세스 할 수 없었습니다 (약속 만 해당).세번째 시도는 처리기를 연결하기 위해 XHR에 직접 액세스 할 수있게했지만 다시 많은 복사 및 붙여 넣기 코드가 필요했습니다.
세번째 시도를 마무리하고 jQuery의
ajax
를 교체했습니다. 내 자신과 함께. 유일한 단점은 더 이상 자신의xhr()
를 사용할 수 없다는 것입니다 환경.options.xhr
여부를 확인하여 허용 할 수 있습니다 함수입니다.실제로
promise.progress
라고 부릅니다 기능xhrProgress
나중에 쉽게 찾을 수 있습니다. 업로드 및 다운로드 리스너를 분리하기 위해 다른 이름을 지정할 수 있습니다. 원래 포스터가 이미 필요한 것을 얻었더라도 이것이 누군가를 돕기를 바랍니다.(function extend_jQuery_ajax_with_progress( window, jQuery, undefined ) { var $originalAjax = jQuery.ajax; jQuery.ajax = function( url, options ) { if( typeof( url ) === 'object' ) {options = url;url = undefined;} options = options || {}; // Instantiate our own. var xmlHttpReq = $.ajaxSettings.xhr(); // Make it use our own. options.xhr = function() {return( xmlHttpReq );}; var $newDeferred = $.Deferred(); var $oldPromise = $originalAjax( url, options ) .done( function done_wrapper( response, text_status, jqXHR ) {return( $newDeferred.resolveWith( this, arguments ));}) .fail( function fail_wrapper( jqXHR, text_status, error ) {return( $newDeferred.rejectWith( this, arguments ));}) .progress( function progress_wrapper() { window.console.warn( "Whoa, jQuery started actually using deferred progress to report Ajax progress!" ); return( $newDeferred.notifyWith( this, arguments )); }); var $newPromise = $newDeferred.promise(); // Extend our own. $newPromise.progress = function( handler ) { xmlHttpReq.addEventListener( 'progress', function download_progress( evt ) { //window.console.debug( "download_progress", evt ); handler.apply( this, [evt]); }, false ); xmlHttpReq.upload.addEventListener( 'progress', function upload_progress( evt ) { //window.console.debug( "upload_progress", evt ); handler.apply( this, [evt]); }, false ); return( this ); }; return( $newPromise ); }; })( window, jQuery );
- 답변 # 5
Ajax 요청 진행률을 표시하려면 다음 단계를 따르십시오.
<올>Html&CSS를 사용하여 Spinner를 만들거나 Bootstrap Spinner를 사용하십시오.
최종 사용자가 무한 루프 또는 임계 값 제한 시간 동안 AJAX 데이터를 요청하면 스피너를 표시합니다.
따라서 AJAX 요청의 성공/오류 결과 후에 현재 표시된 스피너를 제거하고 결과를 표시하십시오.
쉽게하려면이 목적으로 스피너를 동적으로 표시 및 숨기기에 JS 클래스를 사용하는 것이 좋습니다.
이것이 도움이되기를 바랍니다!
- HTML /Javascript 버튼이 Safari (iPhone, macbook)에서는 작동하지 않지만 다른 브라우저 (Chrome 및 Samsung Internet)에서는 작동합니다.
- javascript : 초기 Ajax 양식 제출 후 부트 스트랩 드롭 다운이 작동하지 않음
- javascript : jquery를 사용하여 ajax 응답을 인쇄하는 방법
- javascript : Codeigniter 또는 가능한 다른 솔루션으로 다차원 배열 처리에 대한 조언?
- javascript : append ()는 ajax 데이터 문자열의 jQuery 함수가 아닙니다.
- javascript : AJAX를 사용한 사용자 로그인 용 Django 모델이 성공적으로 게시되지 않습니다.
- javascript : 정보를 전달하는 jquery ajax 호출을 연결하는 가장 좋은 방법
- javascript : 선택한 모든 확인란을 배열로 가져 오기
- javascript : onsubmit 형식으로 ajax 함수 호출
- javascript : php ajax에 의해 datatable의 여러 선택 옵션에 따라 데이터 필터링
$.ajax
에 대한 이와 같은 것 (HTML5 만 해당) :