今天我們來討論如何使用Ajax傳遞多個參數。在前端開發中，我們經常需要向服務器發送請求，同時傳遞多個參數。以查詢商品信息為例，我們可能需要同時傳遞商品名稱、價格范圍、所屬類別等信息給服務器。使用Ajax技術，我們可以通過GET或POST方法傳遞多個參數，以滿足不同需求。

首先，我們來看一下使用GET方法傳遞多個參數的示例。假設我們有一個搜索表單，用戶可以輸入商品名稱和價格范圍來查詢商品。當用戶點擊搜索按鈕時，我們可以通過JavaScript獲取表單中的值，并將它們作為參數拼接到請求URL中。下面是一個示例：

var name = document.getElementById('name').value;
var minPrice = document.getElementById('minPrice').value;
var maxPrice = document.getElementById('maxPrice').value;
var url = 'search.php?name=' + name + '&minPrice=' + minPrice + '&maxPrice=' + maxPrice;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
// 處理服務器返回的數據
}
};
xhr.send();

在上面的代碼中，我們首先獲取了表單中輸入框的值，并拼接到請求URL中。接著，我們創建一個XMLHttpRequest對象，使用open方法傳遞GET請求的URL。在readyState改變時，我們可以通過status判斷服務器返回成功后進行下一步處理。

另一種常見的情況是使用POST方法傳遞多個參數。與GET方法不同的是，POST方法將參數放在請求體中而不是URL中，更適合傳遞大量數據。接下來我們看一個示例：

var name = document.getElementById('name').value;
var minPrice = document.getElementById('minPrice').value;
var maxPrice = document.getElementById('maxPrice').value;
var params = 'name=' + name + '&minPrice=' + minPrice + '&maxPrice=' + maxPrice;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'search.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
// 處理服務器返回的數據
}
};
xhr.send(params);

在上面的代碼中，我們首先獲取了表單中輸入框的值，并將它們拼接到一個字符串params中。接著，我們創建一個XMLHttpRequest對象，使用open方法傳遞POST請求的URL。使用setRequestHeader方法設置Content-type為application/x-www-form-urlencoded，以告訴服務器請求體中的數據格式。在send方法中，我們將params作為參數發送給服務器。

總結來說，無論是使用GET方法還是POST方法，我們都可以通過拼接參數到URL或將參數放在請求體中的方式傳遞多個參數。GET方法適用于參數較少且不需要保密的情況，而POST方法適用于參數較多或需要保密的情況。根據具體需求選擇不同的傳遞方式，可以使我們的前端開發更加靈活和高效。