AJAX 是一種用于在網頁上動態加載數據的技術，它通過在后臺和服務器之間進行數據交換，實現無需刷新整個網頁即可更新部分內容的效果。在許多應用中，需要將多個輸入字段綁定到一個 AJAX 請求中，以便同時發送多個值到服務器并獲取結果。本文將介紹如何使用 AJAX 來實現綁定多個輸入字段的功能，并通過實例來進行說明。

假設有一個電商網站，用戶可以在搜索框中輸入商品名稱和價格范圍來查找符合條件的商品。為了實現這一功能，我們需要將商品名稱和價格范圍這兩個輸入字段綁定到一個 AJAX 請求中。當用戶輸入完畢后，通過 AJAX 操作將這兩個值發送給服務器，并獲取符合條件的商品結果。

首先，我們需要在 HTML 中創建兩個輸入字段，并為它們分別指定 id 屬性以便在 JavaScript 代碼中使用。代碼如下：

<input id="productName" type="text" placeholder="請輸入商品名稱">
<input id="priceRange" type="text" placeholder="請輸入價格范圍">

接下來，我們需要在 JavaScript 中實現 AJAX 綁定這兩個輸入字段。首先，我們需要通過 document.getElementById() 方法獲取輸入字段的值，并存儲在變量中。代碼如下：

var productName = document.getElementById('productName').value;
var priceRange = document.getElementById('priceRange').value;

然后，我們需要創建一個新的 XMLHttpRequest 對象，并使用 open() 方法指定請求的類型、URL 和異步的方式。代碼如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'search.php?productName=' + productName + '&priceRange=' + priceRange, true);

在請求發送之前，我們需要定義一個回調函數來處理 AJAX 響應。在該回調函數中，我們可以通過 responseText 屬性獲取服務器返回的數據，并在頁面上進行顯示。代碼如下：

xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 在頁面上顯示返回的結果
document.getElementById('result').textContent = response.result;
} else {
console.log('AJAX 請求失敗');
}
}
};

最后，我們需要發送 AJAX 請求。代碼如下：

xhr.send();

整個過程如下圖所示：

通過以上步驟，我們成功地將商品名稱和價格范圍這兩個輸入字段綁定到了一個 AJAX 請求中。當用戶輸入完畢后，點擊搜索按鈕即可發送請求到服務器并獲取商品列表。

總結來說，使用 AJAX 可以實現綁定多個輸入字段的功能，通過將這些字段的值發送給服務器并獲取結果，用戶可以方便地查詢符合特定條件的數據。我們可以將這種方式應用于各種需要發送多個值到服務器的場景中，如篩選條件、搜索功能等。