在現代Web開發中，Ajax成為了一項重要的技術。通過Ajax，我們可以在不刷新整個頁面的情況下，實現與服務器的數據交互。其中，最常見的應用場景就是通過Ajax獲取數據后，將數據展示在新的頁面上。本文將詳細介紹如何使用Ajax獲取數據，并跳轉到新的頁面展示數據。
假設我們正在開發一個在線商城網站，當用戶點擊了某個商品，我們需要在新的頁面上展示該商品的詳細信息。考慮到網站流量較大，我們希望盡可能減少頁面刷新，提升用戶體驗。因此，我們將使用Ajax技術來獲取商品的詳細信息，并在新的頁面上展示。
首先，我們需要編寫一個用于獲取商品信息的Ajax請求。下面是一個簡單的示例：

<pre>
$.ajax({
url: "get_product_info.php",
method: "GET",
data: {product_id: 123},
success: function(response){
var product = JSON.parse(response);
// 接下來的代碼將product數據展示在新的頁面上
// ...
}
});

在上面的代碼中，我們使用了jQuery的$.ajax函數來發送一個GET請求到服務器上的get_product_info.php頁面。同時，我們傳遞了一個參數product_id，值為123，以指定要獲取的商品。當服務器成功返回響應時，我們使用success回調函數來處理服務器返回的數據。在這個回調函數中，我們將商品信息保存在一個變量product中，并根據需要將其展示在新的頁面上。
接下來，我們需要創建一個用于展示商品信息的新頁面。在這個頁面上，我們可以使用HTML和JavaScript來展示來自Ajax請求的商品信息。下面是一個簡單的示例：

<pre>
/*
這是新頁面的JavaScript代碼
*/
$(document).ready(function(){
// 獲取來自上一個頁面傳遞過來的商品信息
var product = getProductFromUrl();
// 將商品信息展示在頁面上
showProductInfo(product);
});
function getProductFromUrl(){
// 從URL中獲取商品信息，這里可以根據實際情況進行解析
// 返回商品信息對象
}
function showProductInfo(product){
// 根據商品信息，將其展示在頁面上
}

在上面的代碼中，我們使用了jQuery的$(document).ready函數來確保頁面完全加載后執行相關代碼。在ready函數中，我們調用getProductFromUrl函數來獲取上一個頁面傳遞過來的商品信息，并保存在product變量中。接下來，我們調用showProductInfo函數來將商品信息展示在頁面上。
總結起來，通過Ajax獲取數據并跳轉到新的頁面，可以有效地提升Web應用的用戶體驗。用戶無需等待整個頁面刷新，即可快速獲得所需的數據。當然，以上只是一個簡單的示例，實際應用中可能會更加復雜。但是，通過掌握Ajax技術，我們可以實現更多的功能，為用戶提供更好的Web體驗。