Показать изображение загрузки на странице загрузки Ajax

Question

У меня есть кнопка, что, когда мы нажимаем на нее, база данных будет обновляться, а затем результат будет отображаться на странице, основанной на upload.php ((этот раздел работает хорошо, у меня нет проблем с этим.))

<BB id="2" data-original-title="Preview" data-placement="top" class="data-tooltip" rel="tooltip" data-toggle="modal" style="text-decoration:none">

<kk><!--show updated columns information here--></kk>

$(document).ready(function() {
$("BB").click(function() {
    var Id = jQuery(this).attr("id");
    $.ajax({
        type: 'POST',
        data: {
            'modal_id' : Id,
        },
        url : "upload.php",
        success: function(response) {
            if(response) {
                $('kk').append(response);
                $('#modal_'+Id).modal('show');
                $(document).on('hidden.bs.modal', modal_id, function (event) {
                    $(this).remove();
                });
            } else {
                alert('Error');
            }
        }
    });
});
});

Я хочу добавить изображение загрузки, когда upload.php находится в процессе обработки, и как только страница загрузится, изображение загрузки исчезнет, ​​и мой результат будет показан.

Как я могу добавить изображение в вышеупомянутый JavaScript во время загрузки страницы?

Answer 1

Стиль A Loader и сделать дополнительный класс для отображения. Я назвал свой класс active, При нажатии вы показываете загрузчик, а по завершению скрываете его. Использовать completeОбратный вызов, потому что запрос может быть неудачным.

<div id="loader"></div>

$("BB").click(function() {
var Id = jQuery(this).attr("id");
$('#loader').addClass('active');
$.ajax({
    type: 'POST',
    data: {
        'modal_id' : Id,
    },
    url : "upload.php",
    success: function(response) {
        if(response) {
            $('kk').append(response);
            $('#modal_'+Id).modal('show');
            $(document).on('hidden.bs.modal', modal_id, function (event) {
                $(this).remove();
            });
        } else {
            alert('Error');
        }
    },
    complete: function() {
        $('#loader').removeClass('active');
    }
});
});