最近，越來越多的網站開始使用 Ajax 技術來實現頁面的異步加載和數據的實時更新。Ajax 的一個常見應用是通過用戶輸入的值傳遞給服務器，并根據服務器的響應動態更新頁面。本文將探討如何使用 Ajax 傳遞 input 元素的值，并通過舉例來說明其應用。

在一個在線購物網站上，當用戶在搜索框中輸入關鍵字時，我們希望通過 Ajax 傳遞輸入的值給服務器，并實時顯示匹配的商品列表。首先，我們需要監聽輸入框的值改變事件，并使用 Ajax 請求來向服務器發送值。以下是一個簡化的示例：

// 監聽 input 元素的值改變事件
document.getElementById("search").addEventListener("input", function() {
// 獲取輸入框的值
var keyword = this.value;
// 創建一個 Ajax 請求
var request = new XMLHttpRequest();
request.open("GET", "/search?keyword=" + encodeURIComponent(keyword), true);
// 發送請求
request.send();
});

在這個示例中，我們使用了 JavaScript 的原生 XMLHttpRequest 對象來創建一個 Ajax 請求。我們通過 GET 方法將 input 元素的值作為查詢參數傳遞給服務器。需要注意的是，我們將輸入的關鍵字使用 encodeURIComponent 函數進行編碼，以確保傳遞的值不會破壞 URL 的結構。

接下來，服務器會根據接收到的關鍵字進行商品的搜索，并將匹配的結果返回給前端頁面。以下是服務器端示例代碼的簡化版本：

app.get("/search", function(req, res) {
// 獲取查詢參數中的關鍵字
var keyword = req.query.keyword;
// 在數據庫中搜索匹配的商品
var results = db.search(keyword);
// 將搜索結果作為 JSON 數據返回給前端
res.json(results);
});

這段代碼使用了一個 Express.js 的路由處理程序來處理 "/search" 請求。它首先提取出查詢參數中的關鍵字，并將其傳遞給數據庫的搜索函數。然后，搜索結果以 JSON 格式返回給前端頁面。

前端頁面接收到服務器返回的搜索結果后，我們可以使用 JavaScript 動態更新頁面中顯示的商品列表。以下是一個簡化的前端代碼示例：

// 監聽 Ajax 請求的狀態改變事件
request.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
// 將服務器返回的結果解析為 JSON 數據
var results = JSON.parse(this.responseText);
// 更新頁面中的商品列表
var productList = document.getElementById("productList");
productList.innerHTML = "";
results.forEach(function(product) {
var item = document.createElement("div");
item.innerHTML = product.name;
productList.appendChild(item);
});
}
};

在這個示例中，我們在 Ajax 請求的狀態改變事件中，檢查請求的狀態和響應的狀態碼。當請求的狀態為 4（完成）且狀態碼為 200（成功）時，表示服務器返回了正確的響應。我們使用 JSON.parse 函數將服務器返回的結果解析為 JSON 數據，并使用結果動態更新頁面中的商品列表。

通過上述示例，我們可以看到通過 Ajax 傳遞 input 元素的值可以實現實時更新頁面功能。這種技術在各種場景下都有廣泛應用，例如在線搜索、動態過濾、自動完成等。通過使用 Ajax，我們可以提升用戶體驗，并讓網站更加動態和響應式。