Я хочу отобразить индикатор выполнения, когда я нажимаю кнопку, чтобы загрузить контент через ajax. Как только я создаю вызов $.ajax , связь переходит к файлу php на сервере, который сбрасывает данные из другого файла на сервере. И для получения данных требуется 7-8 секунд.
Я хочу показать загрузчик прогресса во время выполнения запроса ajax. Я смотрел в Интернете и не мог найти простого решения. Все, что я мог найти, это сложные сценарии загрузки файлов, которые ужасно пострадали, чтобы настроить эту простую операцию. Если кто-нибудь может помочь, это будет здорово. Иначе я должен был бы обходиться со спиннером.
Поскольку все другие ответы касаются всего лишь изображения или текста заполнителя или просто его притворения, вот как вы могли это сделать (просто описание, отсутствие кода, но единственная сложная часть – определение того, какая часть работы действительно выполняется):
Отредактируйте php-скрипт, который вы вызываете через $.ajax чтобы вычислить процент выполненной работы – как вы это сделаете, зависит от сценария и, как таковой, может быть очень простым (например, когда вы просто итерации по множеству вещей для обработки, которые каждый занимает примерно одно и то же время) или чрезвычайно трудно (например, когда большая часть времени проводится в одном единственном, не повторяющемся вызове библиотеки или встроенной функции). Сохраните этот процент в переменной сеанса:
$_SESSION["PERCENTAGE_DONE"] = $my_calculated_percentage;
Очевидно, что вы хотите обновлять эту переменную настолько часто, насколько это возможно и разумно.
Теперь создайте еще один php-скрипт, который просто распечатает это значение (для этого примера будет достаточно простого текста, но вы также можете использовать json или xml или какой-либо другой формат, который вам нравится):
//initialize session, set headers etc. before this echo $_SESSION["PERCENTAGE_DONE"]
Для части javascript создайте еще одну функцию, которая вызывает новый скрипт php через ajax, читает возвращаемое значение и рисует / обновляет индикатор выполнения (для части чертежа вы можете взять JustinJohns в качестве отправной точки). Теперь, после выполнения основного вызова $.ajax , используйте эту функцию с помощью setTimeout чтобы запросить сервер повторно, пока задача не будет завершена.
Попробуйте выполнить сценарий для шага выполнения Ajax:
<script> function submit_form_data(){ $("#preview").html(''); $("#preview").html('<img src="loader.gif" alt="Uploading...."/> <br><p>Please wait for response.............</p>'); $.post('getdata.php',function(data){$("#preview").html(data)}) } </script> <div id='preview'></div>
Основная проблема заключается в том, что вы не знаете, как долго будет проходить запрос.
Это будет скорее предложение, чем ответ.
Я предполагал, что время будет около 7-8 секунд.
Прогрессируйте с загрузкой 10 процентов на каждую секунду до достижения 90 процентов.
После того, как вы дожидаетесь завершения вашего запроса ajax и сделайте ширину бара 100 процентов при успешном обратном вызове ajax.
Вы можете настроить со временем, чтобы загрузить процент бара.
Проверьте эту демонстрационную версию
Изображение, которое вы использовали, должно загружать изображение анимации.
<div id="loading" > <p> <img src="images/loading.gif"> Please Wait </p> </div>
Затем в функции скрипта используйте следующий код
<script type='text/javascript'> function showLoading() { $("#loading").show(); } function hideLoading() { $("#loading").hide(); } </script>
Затем вызовите функцию showLoading и hideLoading, в которой вы нуждаетесь в вызове ajax. Он отобразит и спрячет анимацию.
Поскольку вы попросили простое решение, это может вам помочь. У вас есть div с идентификатором «загрузка» с отображением как скрытым.
<div id='loading' style='display:none;'><img src='loading.gif' /></div>
Когда вызываемый запрос ajax вызывается, отобразите div
$('#loading').show();
Когда ответ будет успешным, снова спрячьте div,
$('#loading').hide();