当用户通过 ajax 发送数据时，我想通过 CSS 在我的页面上显示一个加载图标，然后在 ajax 调用完成后删除这个加载图标。该页面成功显示了一次图标，但没有页面刷新就不会再次显示该图标。但是，对于多个调用，ajax 调用已成功完成。这是我的代码:
相关的 HTML:
<head>
<link rel="stylesheet" href="~/Content/Loading.css" type="text/css" 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;
}
最佳答案
ajax 调用的全局设置
看看这个答案:https://stackoverflow.com/a/2387709/3298029
这是添加和删除加载类的 fiddle : http://jsfiddle.net/0fpdud5h/
jQuery.ajaxSetup({
beforeSend: function() {
body.addClass('loading');
},
complete: function(){
body.removeClass('loading');
},
success: function() {}
});
它在这个 fiddle 上触发了多次。 希望这能让您入门。
关于javascript - 如何多次添加/删除类？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36158860/