Индикатор выполнения AJAX запроса (jQuery)

Раздел языка JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2031
Поблагодарили: 62 раза

Индикатор выполнения AJAX запроса (jQuery)

Сообщение Slash » Пн ноя 30, 2015 6:25 pm

Здравствуйте.
Как говорится "Краткость - сестра таланта", я конечно не брат краткости и вообще, ее родственником не являюсь, но буду краток! Сразу к делу.

Допустим, у нас есть код обработки формы (форма #form), в которую вводим, какие то данные, жмем кнопку и через ajax выводим результат на экран (блок #display):

Код: Выделить всё

    $.ajax({ 
        url
: 'ajax.php',
        type: 'POST',
        data: $('#form').serialize(),  
        success
: function(data) 
        
{
            $('#display').html(data);        
        
}
    });

Стоит задача - имитировать процесс выполнения обработки данных. В качестве индикатора можно использовать картинку анимацию (формат .gif). Анимированная картинка должна появится сразу после нажатия кнопки и исчезнуть перед тем, как будет выведен результат.
Приступаем, создаем класс, задаем размеры картинки и прописываем полный путь до нее:

Код: Выделить всё

.processing
{
    width: 25px;
    height: 10px;
    background: url("loading.gif");
}

Теперь в ajax запрос добавляем две функции: addClass() и removeClass(), первая функция подключить наш класс к блоку вывода результата, вторая отключит, перед самым выводом результата:

Код: Выделить всё

    $('#display').addClass('processing'); // Подключаем класс
    $.ajax({ 
        url
: 'ajax.php',
        type: 'POST',
        data: $('#urlform').serialize(),  
        success
: function(data) 
        
{
            $('#display').removeClass('processing'); // Отключаем класс        
            $('#display').html(data);            
        
}
    });

По коду видно, что ajx запрос начнет выполнятся после того, как картинка будет подключена и отключится она перед тем как появится результат.

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

Код: Выделить всё

<div id="indicator"></div>

и измените id блока в функциях addClass() и removeClass():

Код: Выделить всё

$('#indicator').addClass('processing'); // Подключаем класс
$('#indicator').removeClass('processing'); // Отключаем класс  


Надеюсь информация была полезной.
Спасибо за внимание.
Реклама

Вернуться в «JavaScript»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость