Ajax（Asynchronous JavaScript and XML）是一種用于創建交互式網頁應用程序的技術。它通過在后臺與服務器進行數據交換，使網頁能夠在不重新加載整個頁面的情況下更新部分內容。本文將探討如何使用Ajax來實現在當前頁面跳轉到另一個HTML頁面的功能。我們將通過一個實際的例子來說明這個過程。
在許多Web應用程序中，我們經常需要在用戶與某個元素進行交互時，異步加載另一個HTML頁面。例如，一個網站上有一個商品列表，當用戶點擊一個商品時，我們希望在不刷新整個頁面的情況下，展示該商品的詳細信息頁面。這就是我們需要使用Ajax來實現的場景。
首先，我們需要在HTML頁面中引入jQuery庫，因為它提供了簡化Ajax操作的便捷方法。在頁面的標簽內添加以下代碼：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

接下來，在需要觸發頁面跳轉的元素上綁定一個事件處理程序。假設我們有一個商品列表頁面，當用戶點擊某個商品時，需要展示商品的詳細信息頁面。我們可以在每個商品條目上添加一個按鈕，點擊該按鈕后，執行一個函數來處理異步加載商品詳細信息的操作。如下所示：

<p>商品列表</p>
<div class="product">
<p>商品1</p>
<button class="load-details-button" data-product-id="1">查看詳情</button>
</div>
<div class="product">
<p>商品2</p>
<button class="load-details-button" data-product-id="2">查看詳情</button>
</div>
<script>
$(document).ready(function() {
$(".load-details-button").click(function() {
var productId = $(this).data("product-id");
loadProductDetails(productId);
});
});
function loadProductDetails(productId) {
// 使用Ajax來異步加載商品詳細信息的HTML頁面
$.ajax({
url: "product-details.html",
method: "GET",
data: { id: productId },
success: function(response) {
// 將加載到的HTML頁面顯示在當前頁面的某個元素中（例如<div id="product-details">）
$("#product-details").html(response);
},
error: function() {
alert("加載商品詳細信息失敗");
}
});
}
</script>

在上面的代碼中，我們使用了一個類名為"load-details-button"的按鈕來作為觸發元素，通過data屬性傳遞了商品的ID信息。當用戶點擊按鈕時，調用loadProductDetails()函數，并將商品ID作為參數傳遞給該函數。
loadProductDetails()函數使用Ajax來異步加載商品詳細信息的HTML頁面。在Ajax的success回調函數中，我們將加載到的HTML頁面顯示在當前頁面的某個元素中，這里以一個ID為"product-details"的