Question

当用户通过ajax发送数据时，我希望通过CSS在我的页面上显示加载图标，然后在ajax调用完成后删除此加载图标。该页面成功显示一次图标，但没有页面刷新时再次显示。但是，ajax调用正在成功完成多次调用。这是我的代码：

相关的Html：

<head>
<link rel="stylesheet" href="~/Content/Loading.css" type="text/css&quot; id="loading_gif"/>
</head>
...
...
<button type="button" class="btn btn-success" id="button">Import</button>
...
...
<div class="modal"><!-- Placed at bottom of page --></div>

的Ajax：

$(document).ready(function () {
    $('#button').click(function () {                        
        $.ajax({
            type: "POST",
            url: '@Url.Action("Submit")',
            data: { 
              //submit data via jQuery 
            },
            dataType: 'json',
            beforeSend: function() {
                $body.addClass("loading");                        
            },
            success: function (data) {                        
                //render a partialView                    
            },
            complete: function () {
                $body.removeClass("loading");
            }
        });                
    });
}(jQuery));

CSS：

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba( 128, 128, 128, .5 ) url('../img/ajax-loader-bar.gif') 50% 50% no-repeat;
}

/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading {
  overflow: hidden;
}

/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
  display: block;
}

Answer 1

ajax调用的全局设置

看一下这个答案：https://stackoverflow.com/a/2387709/3298029

这是添加和删除加载类的小提琴： http://jsfiddle.net/0fpdud5h/

jQuery.ajaxSetup({
  beforeSend: function() {
     body.addClass('loading');
  },
  complete: function(){
     body.removeClass('loading');
  },
  success: function() {}
});

它会在这个小提琴上多次触发。希望这能让你开始。

我怎样才能多次addClass / removeClass？

1 个答案: