AJAX（Asynchronous JavaScript and XML）是一種無需重新加載整個頁面的技術，可以通過后臺服務器請求數據并更新當前頁面的部分內容。在網頁中，我們經常需要獲取頁面上的數據進行展示或進一步處理。本文將介紹如何使用AJAX從頁面上獲取數據，并提供多個示例以幫助讀者理解。
為了演示如何使用AJAX獲取頁面上的數據，我們首先需要一個具有一些數據展示和交互的網頁。比如，我們有一個電商網站，展示了不同產品的價格。我們想要在用戶選擇一種產品后，通過AJAX獲取該產品的價格并顯示在頁面上。
<pre>
<!DOCTYPE html>
<html>
<head>
<title>產品價格展示</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
<h1>請選擇一種產品：</h1>
<select id="product-select">
<option value="product1">產品1</option>
<option value="product2">產品2</option>
<option value="product3">產品3</option>
</select>
<h2 id="price-display">價格將在這里展示</h2>
<script>
$(document).ready(function() {
$("#product-select").change(function() {
var selectedProduct = $(this).val();
$.ajax({
url: "getPrice.php",
method: "POST",
data: {
product: selectedProduct
},
success: function(response) {
$("#price-display").text(response);
}
});
});
});
</script>
</body>
</html>在上面的示例中，我們使用了jQuery庫來簡化AJAX的使用。首先，在文檔準備好后，我們給產品選擇下拉列表添加了一個change事件監聽器。當用戶選擇了一個產品后，我們通過AJAX請求獲取該產品的價格。
在AJAX請求中，我們通過指定URL（getPrice.php）和請求方法（POST）來告訴服務器我們需要獲取產品的價格。我們還通過data屬性將選擇的產品傳遞給服務器。當服務器返回成功時（success），我們將獲取的價格更新到網頁上的#price-display元素中。
為了使AJAX請求成功，我們還需要在服務器端創建一個getPrice.php文件來處理請求并返回產品的價格。以下是一個簡單的示例：
<pre> <?php $products = [ "product1" => "$100", "product2" => "$200", "product3" => "$300" ]; $selectedProduct = $_POST["product"]; $price = $products[$selectedProduct]; echo $price; ?>
在該示例中，我們使用了PHP來模擬服務器端處理AJAX請求的過程。首先，我們創建了一個關聯數組$products，其中包含了產品和對應的價格。然后，我們獲取通過AJAX請求傳遞的產品信息$_POST["product"]，并從關聯數組中找到對應的價格。最后，我們通過echo語句將價格返回給AJAX請求。
通過以上示例，我們可以看到如何使用AJAX從頁面上獲取數據并更新頁面的部分內容。這種方式使得我們可以實現動態更新頁面的效果，提升用戶體驗。
除了上述示例外，AJAX還可以用于從數據庫中獲取數據、與API進行交互等多種場景。希望讀者通過本文的介紹和示例，對AJAX獲取頁面數據有更深入的理解，并能在自己的項目中靈活運用。