使用Ajax加載數據時，當數據請求正在進行中時，我們希望能夠給用戶一個提示，告訴他們正在加載中，避免用戶以為頁面出現了問題。在本文中，我們將學習如何通過顯示加載中的提示來提升用戶體驗。我們將通過舉例和代碼示例來詳細說明這個過程。 當進行Ajax請求時，我們可以在數據加載期間顯示一個加載中的提示。一個常見的示例是在點擊一個按鈕后，發送一個Ajax請求來加載更多的數據。在這種情況下，我們可以在按鈕旁邊顯示一個加載中的提示，告訴用戶數據正在加載中。 ```

點擊按鈕加載更多數據

加載更多``` 在上面的示例中，我們使用了三個HTML元素。第一個是一個簡單的段落標簽，用來說明用戶可以點擊按鈕加載更多數據。第二個是一個按鈕，在點擊后會觸發一個JavaScript函數。第三個是一個用來顯示加載中的提示的DIV元素，它的初始狀態設置為`display: none;`，表示在頁面加載時是不可見的。 接下來，我們需要編寫一個JavaScript函數`loadMoreData()`來處理點擊按鈕后的操作和顯示加載中的提示。 ``` function loadMoreData() { // 首先顯示加載中的提示 document.getElementById("loading-indicator").style.display = "block"; // 發送Ajax請求獲取更多數據 // ... // 當數據加載完成后，隱藏加載中的提示 document.getElementById("loading-indicator").style.display = "none"; } ``` 在上面的代碼中，我們首先使用`document.getElementById()`函數來獲取到加載中的DIV元素，并將其樣式的`display`屬性設置為`block`，以顯示加載中的提示。接下來我們可以在發送Ajax請求的代碼中加載更多的數據。最后，在數據加載完成后，我們再次更新加載中的DIV元素的樣式，將其`display`屬性設置為`none`，以隱藏加載中的提示。 通過上面的示例，我們可以看到，在用戶點擊按鈕后發送Ajax請求加載數據時，頁面會顯示一個加載中的提示。這樣用戶就能夠明確地知道數據正在加載中，而不是以為頁面出現了問題。 除了按鈕加載更多數據的示例，我們還可以使用輪播圖的例子來說明如何在Ajax請求過程中顯示加載中的提示。 假設我們有一個輪播圖，可以通過點擊左右箭頭來切換圖片。當用戶點擊箭頭時，我們會發送一個Ajax請求來獲取下一張圖片的URL。在切換過程中，我們可以顯示一個加載中的提示，告訴用戶正在加載新的圖片。 `````` 在上面的示例中，我們定義了一個帶有多張圖片和兩個切換按鈕的輪播圖。我們還添加了一個用于顯示加載中的提示的DIV元素，將其樣式設置為`display: none;`。 為了使輪播圖切換圖片時顯示加載中的提示，我們需要在JavaScript函數`prevImage()`和`nextImage()`中添加顯示和隱藏加載中提示的代碼。 ``` function prevImage() { // 首先顯示加載中的提示 document.getElementById("loading-indicator").style.display = "block"; // 發送Ajax請求獲取上一張圖片的URL // ... // 當數據加載完成后，隱藏加載中的提示 document.getElementById("loading-indicator").style.display = "none"; // 切換圖片 // ... } function nextImage() { // 首先顯示加載中的提示 document.getElementById("loading-indicator").style.display = "block"; // 發送Ajax請求獲取下一張圖片的URL // ... // 當數據加載完成后，隱藏加載中的提示 document.getElementById("loading-indicator").style.display = "none"; // 切換圖片 // ... } ``` 在上面的代碼中，我們在點擊左右箭頭切換圖片時，首先顯示加載中的提示。然后發送Ajax請求獲取上一張或下一張圖片的URL。在數據加載完成后，我們隱藏加載中的提示。最后，我們可以將獲取到的圖片URL應用到輪播圖上，實現圖片的切換。 通過上述示例，我們可以了解到如何在Ajax請求過程中顯示加載中的提示。無論是點擊按鈕加載更多數據，還是切換輪播圖圖片，都可以使用相似的方法來顯示加載中的提示，提升用戶體驗，同時避免用戶以為頁面出現了問題。