在網頁開發中，經常會遇到一種需求：當點擊某個按鈕后，為了避免用戶多次點擊導致重復操作，我們需要讓該按鈕變為不可用狀態。這時，可以通過使用Ajax來實現。通過Ajax，我們能夠在按鈕點擊事件中發送請求，并在得到響應后將按鈕設置為不可用。接下來，我們將詳細介紹如何使用Ajax來實現這一功能。
在使用Ajax之前，我們需要先確保按鈕的點擊事件已經綁定了相應的函數。假設我們有一個按鈕元素，點擊后會調用名為"submitAction"的函數。首先，我們可以給按鈕元素設置一個id屬性，以便能夠通過id選擇器獲取該元素。然后，在頁面加載完成后，可以通過jQuery的ready()函數來綁定按鈕的點擊事件，代碼如下所示：

$(document).ready(function() {
$("#submitBtn").click(submitAction);
});

在submitAction函數中，我們需要發送一個Ajax請求。Ajax的核心是通過XMLHttpRequest對象發送HTTP請求，并在響應到達后執行相應的操作。在這里，我們將使用jQuery提供的$.ajax()函數來發送Ajax請求。代碼如下所示：

function submitAction() {
// 禁用按鈕
$("#submitBtn").prop("disabled", true);
// 發送Ajax請求
$.ajax({
url: "your_url",  // 替換為你的請求URL
type: "POST",     // 替換為你的請求類型，可以是GET或POST
data: {           // 替換為你的請求參數
key1: value1,
key2: value2
},
success: function(response) {
// 處理響應結果
// 恢復按鈕可用狀態
$("#submitBtn").prop("disabled", false);
},
error: function() {
// 處理錯誤
alert("請求失敗！");

// 恢復按鈕可用狀態
$("#submitBtn").prop("disabled", false);
}
});
}

在上述代碼中，當按鈕被點擊時，首先會將按鈕設置為不可用狀態，通過$("#submitBtn").prop("disabled", true)這行代碼實現。然后，通過$.ajax()函數發送Ajax請求。在請求成功后，可以在success回調函數中處理響應結果，并使用$("#submitBtn").prop("disabled", false)將按鈕恢復為可用狀態。在請求失敗時，可以在error回調函數中處理錯誤情況，并同樣使用$("#submitBtn").prop("disabled", false)將按鈕恢復為可用狀態。這樣就實現了按鈕不可用的效果。
值得注意的是，在響應到達之前，整個過程可能需要一定的時間。因此，為了提高用戶體驗，我們可以在按鈕不可用的同時，給用戶一些提示信息，告知當前請求正在處理中。
綜上所述，通過使用Ajax，我們可以在按鈕點擊后將其設置為不可用狀態，從而避免用戶多次點擊導致重復操作。有了這個功能，我們能夠更好地控制用戶的操作行為，提升網頁的交互性和可用性。