在網(wǎng)頁開發(fā)中，使用Ajax來獲取數(shù)據(jù)是非常常見的操作。當(dāng)我們?cè)谕ㄟ^Ajax獲取數(shù)據(jù)的時(shí)候，有可能會(huì)遇到數(shù)據(jù)加載的過程需要一些時(shí)間，這時(shí)候，我們可以通過顯示"加載中"的提示來提升用戶體驗(yàn)。本文將介紹如何在Ajax獲取數(shù)據(jù)時(shí)顯示"加載中"的效果，并給出具體的代碼實(shí)例。
當(dāng)用戶在網(wǎng)頁上進(jìn)行一些操作，需要通過Ajax獲取數(shù)據(jù)的時(shí)候，我們通常會(huì)使用Loading效果來提示用戶，正在加載數(shù)據(jù)。例如，當(dāng)用戶在網(wǎng)頁上點(diǎn)擊一個(gè)按鈕，需要通過Ajax請(qǐng)求服務(wù)器端的數(shù)據(jù)，并將獲取到的數(shù)據(jù)顯示在頁面上。在這個(gè)過程中，頁面會(huì)顯示一個(gè)loading圖標(biāo)或者文字，告訴用戶正在加載數(shù)據(jù)，稍等片刻。
下面是一個(gè)使用jQuery的Ajax來獲取數(shù)據(jù)時(shí)顯示"加載中"的簡(jiǎn)單示例：

html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="loadData">加載數(shù)據(jù)</button>
<div id="result"></div>
<script>
$(document).ready(function(){
$("#loadData").click(function(){
$("#result").html("<p>加載中...</p>");
$.ajax({
url: "data.php", // 請(qǐng)求的URL地址
type: "GET", // 請(qǐng)求方式
dataType: "json", // 返回?cái)?shù)據(jù)的格式
success: function(data) { // 請(qǐng)求成功時(shí)的回調(diào)函數(shù)
var html = "<p>數(shù)據(jù)加載成功：</p>";
// 處理返回的數(shù)據(jù)
for (var i = 0; i < data.length; i++) {
html += "<p>" + data[i] + "</p>";
}
$("#result").html(html);
},
error: function() { // 請(qǐng)求失敗時(shí)的回調(diào)函數(shù)
$("#result").html("<p>數(shù)據(jù)加載失敗！</p>");
}
});
});
});
</script>

在上面的例子中，當(dāng)用戶點(diǎn)擊"加載數(shù)據(jù)"按鈕的時(shí)候，會(huì)觸發(fā)click事件，頁面會(huì)顯示"加載中..."的提示。然后通過Ajax發(fā)送一個(gè)GET請(qǐng)求到服務(wù)器端的"data.php"，獲取到返回的數(shù)據(jù)。如果請(qǐng)求成功，頁面會(huì)顯示數(shù)據(jù)加載成功的提示，并將數(shù)據(jù)顯示在"#result"元素中；如果請(qǐng)求失敗，會(huì)顯示數(shù)據(jù)加載失敗的提示。
當(dāng)然，在實(shí)際應(yīng)用中，"加載中"的效果可以根據(jù)實(shí)際情況進(jìn)行擴(kuò)展和美化，可以使用CSS樣式來設(shè)置loading圖標(biāo)或動(dòng)畫，或者使用其他方式來提醒用戶正在加載數(shù)據(jù)。以上只是一個(gè)簡(jiǎn)單的示例，希望能夠?qū)δ阌兴鶐椭?/div>