AJAX（Asynchronous JavaScript and XML）是一種用于前端開發的技術，通過異步請求，在不刷新整個頁面的情況下與后端進行數據交互。在網頁提交表單時，為了提升用戶體驗，我們通常會給提交按鈕添加一個遮擋層，以防止用戶多次點擊提交按鈕導致重復提交。本文將介紹如何通過AJAX提交表單時，給提交按鈕增加遮擋層，提高用戶體驗。

AJAX提交表單的一種常見方式是使用jQuery庫中的ajax()方法。我們可以通過該方法實現異步請求，并在請求成功或失敗時執行相應的回調函數。通過在回調函數中給提交按鈕增加隱藏或禁用屬性，即可實現遮擋層的效果。

$('form').on('submit', function(e) {
e.preventDefault(); // 阻止表單默認提交行為
// 添加遮擋層
$('button[type="submit"]').prop('disabled', true);
// 發起AJAX請求
$.ajax({
url: 'submit.php',
method: 'POST',
data: $(this).serialize(),
success: function(response) {
// 請求成功時的回調函數
// 移除遮擋層
$('button[type="submit"]').prop('disabled', false);
// 處理返回的數據
// ...
},
error: function() {
// 請求失敗時的回調函數
// 移除遮擋層
$('button[type="submit"]').prop('disabled', false);
// 顯示錯誤信息
// ...
}
});
});

上述代碼中，我們使用了jQuery的on()方法來監聽表單的submit事件，并通過e.preventDefault()方法阻止表單的默認提交行為。在提交按鈕點擊后，我們在回調函數中給按鈕添加了disabled屬性，將其禁用。這樣，用戶再次點擊按鈕時，按鈕將無法再次觸發表單提交的操作。

除了給提交按鈕增加遮擋層外，我們還可以采取其他方式來提升用戶體驗。例如，我們可以在提交按鈕上添加一個loading樣式或加載動畫，以向用戶展示正在處理請求的狀態。例如：

$('form').on('submit', function(e) {
e.preventDefault(); // 阻止表單默認提交行為
// 添加遮擋層
$('button[type="submit"]').addClass('loading');
// 發起AJAX請求
$.ajax({
url: 'submit.php',
method: 'POST',
data: $(this).serialize(),
success: function(response) {
// 請求成功時的回調函數
// 移除遮擋層
$('button[type="submit"]').removeClass('loading');
// 處理返回的數據
// ...
},
error: function() {
// 請求失敗時的回調函數
// 移除遮擋層
$('button[type="submit"]').removeClass('loading');
// 顯示錯誤信息
// ...
}
});
});

上述代碼中，我們通過jQuery的addClass()和removeClass()方法，給提交按鈕添加或移除了一個名為loading的CSS類。該類可以定義一個加載中的樣式，例如顯示一個轉圈的加載圖標。這樣，當用戶點擊提交按鈕后，將會看到按鈕被替換成加載圖標，以表示正在處理請求。

通過以上方法，我們可以在AJAX提交表單時，給提交按鈕增加遮擋層或展示加載狀態，以提升用戶體驗。無論是禁用按鈕還是添加加載樣式，都可以有效防止用戶多次點擊提交按鈕，避免重復提交表單。同時，我們也可以根據具體需求，自定義遮擋層的樣式和內容，以滿足不同的設計和交互需求。