jQuery Ajax 遮罩層

在使用 Ajax 進行數據請求時，往往需要等待服務器的響應，這時候可以通過添加遮罩層來提示用戶等待。

下面是一個簡單的示例，用 jQuery 實現 Ajax 遮罩層。

$(document).on('ajaxStart', function() {
// 顯示遮罩層
$('
')
.css({
position: 'fixed',
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
zIndex: 9999
})
.appendTo('body');
});
$(document).on('ajaxStop', function() {
// 隱藏遮罩層
$('#loadingMask').remove();
});

上面的代碼中，我們在文檔對象上綁定了兩個事件：ajaxStart 和 ajaxStop。當 JQuery Ajax 請求開始時，會觸發 ajaxStart 事件，這時候我們會通過 jQuery 動態創建一個遮罩層并添加到頁面的 body 元素中，遮蓋整個頁面。當請求結束時，會觸發 ajaxStop 事件，這時候我們將遮罩層從頁面中刪除，遮罩層也就消失了。

通過這種實現方式，可以在用戶等待數據請求的時候提供一個友好的提示，增加用戶體驗。