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 处理时添加加载图片，加载页面后，加载图片就会消失，我的结果会显示出来。

如何在加载页面时将loafing图像添加到上面的JavaScript中？

Answer 1

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

在Ajax加载页面中显示加载图像

1 个答案: