javascript - ajax 加载成功响应并加载旋转

Question

我在模式框中有以下 JavaScript Ajax 代码:

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

当模态框打开并点击BB元素时，就会加载upload.php。

<BB id="2" data-original-title="Preview" data-placement="top" class="data-tooltip" rel="tooltip" data-toggle="modal">

结果将显示在 KK 元素中:

<kk><!--result upload.php--></kk>

当前成功函数设置为KK响应和模态框。

这是我的问题:

如何在Upload.php正在处理时添加加载旋转，并且一旦显示结果，加载旋转也会被删除？

提前致谢。

Answer 1

您必须在模态中添加此 div (.loading)。

<div class="row loading hidden" style="position: absolute; top: 50px; left: 130px; z-index: 10;">
                                <div class="col-md-12">
                                    <h2 class="spinnerH2" style="margin-left:130px;"><i class="fa fa-2x fa-spinner fa-spin"></i></h2>
                                    <h3 class="textH3 hidden" style="background-color: red; color: white; border-radius: 4px;"></h3>
                                </div>
</div>




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

                $(this).remove();
            });
        } else {
           $(".spinnerH2").addClass('hidden');
            alert('Error');

        }
    }
});
});
});