本文將介紹使用Ajax發送GET請求傳遞多個參數的方法。在web開發中，我們通常需要向服務器發送請求獲取數據，而GET請求是一種常見且簡單的請求方式。然而，當我們需要傳遞多個參數時，傳統的方式往往不夠直接和方便。通過使用Ajax，我們可以輕松地將多個參數傳遞給服務器，并獲得相應的數據。

假設我們正在開發一個電商網站，用戶可以根據商品的種類、價格范圍和品牌進行篩選。我們希望實現在用戶選擇不同篩選條件時，頁面能夠實時更新顯示符合條件的商品。為了實現這個功能，我們首先需要使用Ajax發送GET請求，并將用戶的篩選條件作為參數傳遞給服務器。

下面是一個示例代碼，展示了如何使用Ajax發送GET請求傳遞多個參數：

var category = "electronics";
var minPrice = 100;
var maxPrice = 1000;
var brand = "Sony";
var url = "http://example.com/products?category=" + category + "&min_price=" + minPrice + "&max_price=" + maxPrice + "&brand=" + brand;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 處理服務器返回的數據
// 更新頁面顯示
}
};
xhr.send();

在上面的代碼中，我們首先定義了四個變量：category、minPrice、maxPrice和brand，表示用戶選擇的商品種類、最低價格、最高價格和品牌。然后，我們將這些參數拼接到URL中，并通過XMLHttpRequest對象發送GET請求到服務器。

服務器接收到這些參數后，可以根據參數的值進行相應的處理，并返回符合條件的商品數據。在客戶端，我們可以通過XMLHttpRequest對象的onreadystatechange事件來監聽服務器的響應。當readyState屬性等于4并且status屬性等于200時，表示服務器已經成功響應，并可以通過responseText屬性獲取服務器返回的數據。

通過解析服務器返回的數據，我們可以將獲取到的商品數據展示在頁面上，實現實時更新顯示的效果。

除了直接拼接URL的方式，我們還可以使用URLSearchParams對象來構建查詢參數，它提供了一種更方便的方法來管理多個參數：

var params = new URLSearchParams();
params.append('category', 'electronics');
params.append('min_price', '100');
params.append('max_price', '1000');
params.append('brand', 'Sony');
var url = "http://example.com/products?" + params.toString();
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 處理服務器返回的數據
// 更新頁面顯示
}
};
xhr.send();

在上面的代碼中，我們使用URLSearchParams對象的append方法將參數添加到查詢中，并使用toString方法將其轉換為URL格式的字符串。然后，我們將這個字符串拼接到查詢URL中，再發送GET請求。

總之，通過使用Ajax發送GET請求傳遞多個參數，我們可以實現更靈活和方便的數據交互。無論是拼接URL還是使用URLSearchParams對象，都可以讓我們更好地管理和傳遞參數，以滿足不同的業務需求。