在網頁開發中，我們經常需要從數據庫中提取數據并顯示在頁面上。而傳統的方式是使用后端語言（如PHP）與數據庫進行交互，然后將獲取到的數據傳遞給前端進行顯示。然而，這種方式需要刷新整個頁面，用戶體驗較差。而使用AJAX技術可以實現在不刷新整個頁面的情況下，從數據庫中提取數據并即時更新到頁面上。本文將介紹如何使用AJAX從MySQL數據庫中提取數據，并展示一些常見的應用場景。

1. AJAX從MySQL中提取單一數據

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: "fetch_single_data.php",
method: "POST",
success: function(data){
$("#result").html(data);
}
});
});
</script>

上面的代碼演示了如何使用AJAX從MySQL中提取單一數據。在上面的例子中，我們使用jQuery庫來簡化AJAX請求的代碼。在頁面加載完成后，我們通過$.ajax()函數發送一個POST請求到fetch_single_data.php頁面。請求成功后，返回的數據將會更新到id為“result”的元素中。

2. AJAX從MySQL中提取多條數據

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: "fetch_multiple_data.php",
method: "POST",
success: function(data){
$("#result").html(data);
}
});
});
</script>

類似于第一個例子，這段代碼展示了如何使用AJAX從MySQL中提取多條數據。我們同樣向fetch_multiple_data.php發送一個POST請求，然后在請求成功后將返回的數據更新到id="result"的元素中。這樣，我們可以動態地將數據加載到頁面上，而不需要刷新整個頁面。

3. AJAX結合用戶輸入實現即時搜索

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#search").keyup(function(){
var keyword = $(this).val();
$.ajax({
url: "search_data.php",
method: "POST",
data: {keyword: keyword},
success: function(data){
$("#result").html(data);
}
});
});
});
</script>

上述代碼展示了如何使用AJAX結合用戶輸入實現即時搜索的功能。當用戶在id為“search”的輸入框中輸入時，我們捕獲其輸入事件keyup，然后獲取輸入的關鍵詞。接著，我們通過AJAX請求將關鍵詞傳遞給search_data.php，并將返回的結果更新到id="result"的元素中。這樣，用戶輸入的內容與數據庫進行匹配，并實現了實時搜索的效果。

通過上面的示例，我們可以看到AJAX從MySQL數據庫中提取數據的具體實現方法。AJAX技術使得我們可以在不刷新整個頁面的情況下，實現與數據庫的交互和數據的即時更新。這樣可以提高用戶體驗，并提供更加動態的網頁內容。以上只是一些基本的示例，實際應用中可以根據需求進行適當的修改和擴展。