使用Ajax技術在頁面中獲取多個值是一種非常常見的需求。通過Ajax，我們可以通過異步的方式向服務器發送請求并獲取到多個值，然后將這些值展示在頁面上。這種方式不僅可以提高用戶體驗，同時也能避免頁面的刷新。比如，當我們在一個電商網站上查看一個商品的詳細信息時，可能會需要同時獲取到商品的名稱、價格、庫存等多個值。下面我們就通過一個簡單的例子來演示如何使用Ajax獲取多個值到頁面。
首先，我們需要準備一個簡單的HTML頁面，包含一個按鈕和一些用于展示值的容器。下面是示例代碼：

html
<button id="getValuesButton">獲取值</button>
<p id="nameContainer">商品名稱：</p>
<p id="priceContainer">商品價格：</p>
<p id="stockContainer">商品庫存：</p>

接下來，我們使用JavaScript來實現這個功能。我們使用jQuery庫來方便地進行Ajax請求。我們給按鈕添加一個點擊事件，當按鈕點擊時，發送Ajax請求并獲取到值。然后將這些值分別展示在對應的容器中。以下是示例代碼：

javascript
$(document).ready(function() {
$("#getValuesButton").click(function() {
$.ajax({
url: "獲取值的接口地址",
type: "GET",
success: function(response) {
$("#nameContainer").append(response.name);
$("#priceContainer").append(response.price);
$("#stockContainer").append(response.stock);
},
error: function() {
console.log("獲取值失敗");
}
});
});
});

在上面的代碼中，我們使用$.ajax函數發送了一個GET請求到指定的接口地址。當請求成功并返回響應時，我們將響應中的值分別添加到對應的容器中。如果請求失敗，則在控制臺輸出一個錯誤信息。
假設我們的接口返回的響應是一個JSON對象，包含了商品的名稱(name)、價格(price)和庫存(stock)。在上面的代碼中，我們使用response.name、response.price和response.stock分別取出這些值，并將它們追加到對應的容器中。
為了使上述代碼能夠正常運行，我們還需要正確設置接口的地址。在實際開發中，這個接口可以是后端提供的API接口。
總結起來，通過使用Ajax技術，我們可以輕松地在頁面中獲取多個值并展示出來，從而提高用戶體驗和頁面的實用性。這種方式在實際開發中非常常見，比如電商網站的商品詳情頁面、社交網站的用戶個人資料頁面等等。希望本文能夠幫助你理解并使用Ajax獲取多個值到頁面的方法。