W zwykłym javascript jest bardzo proste: wystarczy dołączyć wywołanie zwrotne do {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);
ale robię witrynę Ajax, która pobiera dane html za pomocą JQuery ( $.get()
lub $.ajax()
) i zastanawiałem się, jaki jest najlepszy sposób na uzyskanie postępu żądania, aby wyświetlić go z małym paskiem postępu, ale co ciekawe, nie jestem znajdowanie czegokolwiek przydatnego w dokumentacji JQuery ...
javascript
ajax
jquery
xmlhttprequest
guari
źródło
źródło
jqXHR
obiekt (owijki obiektu zwróconego przez XHR$.ajax()
) i znalazłprogress
atrybut w nim (wraz zabort
,complete
,success
, itd.), ale w Dokumentach JQuery to brakuje: api.jquery.com/jQuery.ajax/#jqXHROdpowiedzi:
Coś takiego dla
$.ajax
(tylko HTML5):źródło
jQuery ma już zaimplementowane obietnice, więc lepiej korzystać z tej technologii i nie przenosić logiki zdarzeń do
options
parametru. Zrobiłem wtyczkę jQuery, która dodaje obietnicę postępu i teraz jest łatwa w użyciu, tak jak inne obietnice:Sprawdź to na github
źródło
TypeError: $.ajax(...).progress(...).progressUpload is not a function
.... w czym problem?Wypróbowałem trzy różne sposoby przechwycenia konstrukcji obiektu Ajax:
xhrFields
, ale pozwala tylko na jednego słuchacza, załącza tylko postęp pobierania (nie przesyłania) i wymaga czegoś, co wydaje się niepotrzebnym kopiowaniem i wklejaniem.progress
funkcję do zwróconej obietnicy, ale musiałem utrzymywać własną tablicę programów obsługi. Nie mogłem znaleźć dobrego obiektu do podłączenia modułów obsługi, ponieważ w jednym miejscu miałbym dostęp do XHR, a w innym do jQuery XHR, ale nigdy nie miałem dostępu do obiektu odroczonego (tylko jego obietnica).ajax
swoim własnym. Jedyną potencjalną wadą jest to, że nie możesz już używać własnegoxhr()
ustawienia. Możesz na to pozwolić, sprawdzając, czyoptions.xhr
jest to funkcja.W rzeczywistości nazywam swoją
promise.progress
funkcję,xhrProgress
aby móc ją później łatwo znaleźć. Możesz nadać mu inną nazwę, aby oddzielić odbiorniki przesyłania i pobierania. Mam nadzieję, że to pomoże komuś, nawet jeśli oryginalny plakat już zawierał to, czego potrzebował.źródło
$.ajax({ ... }).progress(function(evl) { console.log(evl); });
ale nic się nie dzieje. Możesz mi pomóc? :)jQuery posiada
AjaxSetup()
funkcję, która pozwala na rejestrację globalnych programów obsługi AJAX, takich jakbeforeSend
icomplete
dla wszystkich wywołań Ajax, a także umożliwia dostęp doxhr
obiektu w celu wykonania żądanego postępuźródło
.ajaxStart()
,.ajaxStop()
,.ajaxComplete()
,.ajaxError()
,.ajaxSuccess()
,.ajaxSend()
-rather niż w ramach opcji dla obiektów$.ajaxSetup()
”. < api.jquery.com/jQuery.ajaxSetup/#entry-longdesc >http://www.htmlgoodies.com/beyond/php/show-progress-report-for-long-running-php-scripts.html
Szukałem podobnego rozwiązania i znalazłem to w pełni.
}
i wyjścia serwera
źródło
Postępuj zgodnie z instrukcjami, aby wyświetlić postęp żądania Ajax:
Aby to ułatwić, polecam używanie klas JS do dynamicznego wyświetlania i ukrywania pokrętła w tym celu.
Mam nadzieję, że to pomoże!
źródło