本文將介紹如何使用Ajax傳遞數據并進行篩選。通過Ajax，我們可以在不刷新整個頁面的情況下與服務器交換數據。假設我們有一個商品列表，需要根據用戶的選擇篩選出特定類型的商品。我們可以利用Ajax來實現這個功能。

首先，我們需要在前端頁面中創建一個篩選表單，用戶可以通過表單選擇不同的篩選條件。例如，我們可以創建一個下拉列表，列出所有可選的商品類型：電子產品、家居用品、服裝等。用戶選擇完類別后，我們可以通過Ajax將選擇的數據發送到服務器端，獲取符合條件的商品數據。

$.ajax({
url: "filter.php",
type: "POST",
data: { category: selectedCategory },
success: function(response) {
// 處理返回的商品數據
},
error: function(xhr, status, error) {
// 處理錯誤情況
}
});

在上面的代碼中，我們使用了jQuery的Ajax函數來發送POST請求到服務器上的filter.php文件。我們將選擇的商品類別作為數據發送到服務器。當服務器返回成功響應時，我們可以在success回調函數中處理返回的商品數據。

服務器端的filter.php文件需要接收并處理接收到的數據。我們可以根據傳遞過來的商品類別進行篩選，并返回對應的商品數據。以下是PHP示例代碼：

$category = $_POST['category'];
// 根據商品類別篩選數據
$filteredData = array();
if ($category == "電子產品") {
$filteredData = array(
array("name" =>"手機", "price" =>"$100"),
array("name" =>"電腦", "price" =>"$500"),
array("name" =>"平板", "price" =>"$200")
);
} elseif ($category == "家居用品") {
$filteredData = array(
array("name" =>"沙發", "price" =>"$300"),
array("name" =>"餐桌", "price" =>"$150"),
array("name" =>"床", "price" =>"$250")
);
} elseif ($category == "服裝") {
$filteredData = array(
array("name" =>"襯衫", "price" =>"$50"),
array("name" =>"裙子", "price" =>"$70"),
array("name" =>"褲子", "price" =>"$80")
);
}
echo json_encode($filteredData); // 將篩選后的數據返回給前端

在PHP代碼中，我們首先獲取Ajax傳遞過來的商品類別。然后，根據類別篩選出相應的商品數據，并將篩選后的數據存儲在$filteredData數組中。最后，我們使用json_encode函數將篩選后的數據轉換為JSON格式，并將其返回給前端頁面。

回到前端頁面的Ajax成功回調函數中，我們可以使用返回的商品數據來更新商品列表。例如，在前端頁面中創建一個空的商品列表容器：

<div id="product-list"></div>

然后，我們可以在Ajax成功回調函數中根據返回的商品數據動態生成商品列表：

success: function(response) {
var productList = $("#product-list");
productList.empty();
$.each(response, function(index, item) {
var productItem = "<div class='product-item'>" +
"<h3>" + item.name + "</h3>" +
"<p>Price: " + item.price + "</p>" +
"</div>";
productList.append(productItem);
});
}

在上述代碼中，我們首先通過ID選擇器獲取商品列表容器，并使用empty函數清空該容器。然后，我們使用jQuery的each函數遍歷返回的商品數據，為每個商品創建一個帶有名稱和價格的HTML元素，并將其添加到商品列表容器中。

通過上述步驟，我們成功地實現了利用Ajax傳遞數據并進行篩選的功能。用戶通過選擇篩選條件，經過Ajax請求后，我們從服務器端獲取符合條件的商品數據，并在前端頁面實時更新商品列表。