在現代Web開發中，Ajax（異步JavaScript與XML）已成為一項不可或缺的技術。它能夠使我們的網頁能夠在不刷新整個頁面的情況下與服務器進行數據交互，提高了用戶體驗和網頁性能。其中一個常見的應用場景就是通過Ajax傳遞參數到當前頁面。本文將介紹如何使用Ajax傳遞參數，并通過舉例說明其應用。

要理解Ajax傳遞參數到當前頁面，我們先來看一個例子。假設我們有一個頁面顯示一個商品列表，并且我們希望用戶能夠根據自己的需求篩選商品。我們可以在頁面上添加幾個復選框，每個復選框代表一種篩選條件，如品牌、價格范圍等。當用戶選擇了某些篩選條件后，我們希望頁面能夠根據用戶選擇的條件動態地更新商品列表，而不需要刷新整個頁面。

為了實現這一功能，我們可以使用Ajax來傳遞用戶選擇的篩選條件到當前頁面。當用戶點擊篩選按鈕時，JavaScript代碼將收集用戶選擇的條件，并通過Ajax請求將這些條件傳遞給服務器。服務器接收到請求后，可以根據傳遞的參數查詢數據庫獲取符合條件的商品數據，并將結果返回給頁面。JavaScript代碼再根據服務器返回的數據更新商品列表，實現動態篩選的效果。

<script>
function filterProducts() {
var brand = document.getElementById('brand').value;
var priceRange = document.getElementById('priceRange').value;
// 構造參數對象
var params = {
brand: brand,
priceRange: priceRange
};
// 發送Ajax請求
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
var response = JSON.parse(this.responseText);
updateProductList(response);
}
};
xmlhttp.open("GET", "filter.php?params=" + JSON.stringify(params), true);
xmlhttp.send();
}
function updateProductList(data) {
// 更新商品列表的邏輯
// ...
}
</script>

在上面的代碼中，我們定義了一個filterProducts函數，用于收集用戶選擇的篩選條件并發送Ajax請求。首先，我們獲取到用戶選擇的品牌和價格范圍，并使用這些值構造一個參數對象params。然后，我們使用XMLHttpRequest對象發送GET請求，參數名為params，值為params對象的JSON字符串表示。服務器在接收到請求后，可以使用$_GET來獲取傳遞的參數值，并進行相應的處理。

服務器端的代碼示例如下：

<?php
$params = json_decode($_GET['params']);
$brand = $params->brand;
$priceRange = $params->priceRange;
// 根據參數查詢數據庫并返回結果
// ...
// 將結果轉換為JSON字符串并輸出
$result = array(/* 查詢結果數組 */);
echo json_encode($result);
?>

在服務器端，我們使用json_decode函數將傳遞的JSON字符串解析為一個PHP對象，然后根據對象的屬性來獲取參數值。接下來，服務器根據參數值從數據庫中查詢符合條件的商品數據，并將結果存儲在$result數組中。最后，我們使用json_encode函數將$result數組轉換為JSON字符串，并通過echo語句輸出給前端。

當服務器返回結果時，JavaScript代碼中的onreadystatechange函數將被觸發。在該函數中，我們首先使用this.responseText獲取到服務器返回的響應內容，然后使用JSON.parse函數將其解析為一個JavaScript對象。接著，我們調用updateProductList函數來更新商品列表，傳遞解析后的對象作為參數。在updateProductList函數中，我們根據傳遞的數據來更新商品列表的顯示。

通過上面的例子，我們可以看到通過Ajax傳遞參數到當前頁面能夠實現頁面的動態更新，提高用戶體驗。這種技術在各種Web應用中都有廣泛的應用，如搜索引擎的實時搜索、電子商務網站的商品篩選等。掌握了Ajax傳遞參數的原理和使用方法，我們可以更好地構建功能強大、用戶友好的Web應用。