JQuery:: Ajax работает индикатор выполнения?

У меня есть страница, которая использует функции jquery ajax для отправки некоторых сообщений.

Для отправки может быть отправлено более 50 тыс. сообщений.

Это может занять некоторое время.

То, что я хочу сделать, это показать индикатор выполнения с отправляемыми сообщениями.

Бэкэнд - это PHP.

Как я могу это сделать?

Мое решение: Отправьте уникальный идентификатор в исходный вызов ajax.
Этот идентификатор хранится в базе данных (или файл с идентификатором и т.д.) Вместе с процентом завершения.

Это обновляется по мере того, как начинается исходный script.

устанавливается функция под названием progress(ident)

Функция делает ajax-вызов script, который читает процент.
обновлен индикатор прогресса Если возвращенный процент не равен 100,
функция устанавливает тайм-аут, который вызывает себя через 1 секунду.

Ответ 1

У вас может быть анимированная загрузка gif через .html() в область результатов, пока ваша функция ajax не вернет результаты. Просто идея.

Что касается индикатора выполнения jquery ui, периодически с помощью вашего script вам нужно будет эхо-числовое значение, представляющее процент завершен как назначенную переменную javascript. Например...

// text example PHP скрипт
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();
                }
            });
        }
    }

Если бы я должен был догадаться, я готов поспорить, что есть лучший способ... Но так оно и работало для меня, когда я тестировал его.

Ответ 2

Проверьте это, если вы используете jQuery: http://docs.jquery.com/UI/Progressbar

Вы можете просто указать значение бара для каждого успеха AJAX.

В противном случае, если вы не используете JS Framework, см. это: http://www.redips.net/javascript/ajax-progress-bar/

У меня нет возможности проверить его, но он должен выглядеть следующим образом:

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

И убедитесь, что вы включите jQuery вместе с jQueryUI, а затем добавьте контейнер #progressbar где-нибудь на странице.

У меня могут быть некоторые ошибки, хотя... Вероятно, вам придется округлить общее количество, особенно если у вас много писем.

Ответ 3

Используйте этот ответ на вопрос

вот как я его реализовал:

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