javascript - 在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

设计一个加载器并创建一个额外的类来显示它。我将我的类(class)称为事件。单击时显示加载程序，完成后隐藏它。使用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');
    }
});
});