Ajax 是一種用于實現無需刷新頁面的異步通信技術，它能夠用于在用戶交互時快速加載、更新頁面內容。其中一個常見的應用就是實現點擊將內容排序的功能。通過使用 Ajax 技術，可以在不刷新整個頁面的情況下，動態地重新排序頁面上的內容。本文將介紹如何使用 Ajax 來實現點擊將內容排序的功能。

假設我們有一個商品列表，其中包含了多個商品，我們希望用戶能夠根據價格來對商品列表進行排序。在頁面加載完成后，通過 Ajax 向后端發送請求，獲取商品列表的初始數據。然后，在頁面上顯示商品列表，并為價格字段添加一個點擊事件。

$(document).ready(function(){
// 初始化頁面加載時的商品列表
loadProductList();
// 監聽價格字段的點擊事件，觸發排序
$("#price").click(function(){
sortProductListByPrice();
});
});
// 加載商品列表的函數
function loadProductList(){
$.ajax({
url: "get_product_list.php",
method: "GET",
success: function(response){
// 將商品列表顯示在頁面上
$("#product-list").html(response);
}
});
}
// 根據價格排序商品列表的函數
function sortProductListByPrice(){
$.ajax({
url: "sort_product_list.php",
method: "GET",
success: function(response){
// 將排序后的商品列表顯示在頁面上
$("#product-list").html(response);
}
});
}

在上述代碼中，我們使用了 jQuery 庫來簡化 Ajax 的操作。首先，在頁面加載完成后，我們調用了 `loadProductList()` 函數來加載商品列表。該函數會通過 Ajax 發送一個 GET 請求到 `get_product_list.php`，然后將返回的商品列表顯示在頁面上。

接下來，我們通過監聽價格字段的點擊事件來觸發排序動作。當用戶點擊價格字段時，會調用 `sortProductListByPrice()` 函數。該函數會發送一個 GET 請求到 `sort_product_list.php`，然后將排序后的商品列表顯示在頁面上。

在后端的 `get_product_list.php` 中，我們可以查詢數據庫，或者獲取一個預先定義好的商品列表。然后，可以使用 HTML 和 PHP 代碼將商品列表的內容組裝成一個 HTML 字符串，并返回給前端。

// get_product_list.php
$products = array(
array("name" =>"商品1", "price" =>10),
array("name" =>"商品2", "price" =>8),
array("name" =>"商品3", "price" =>15)
);
$html = "";
foreach($products as $product){
$html .= "
".$product["name"]."".$product["price"]."
";
}
echo $html;

在后端的 `sort_product_list.php` 中，我們可以根據用戶點擊的排序方式對商品列表進行排序。然后，也可以使用 HTML 和 PHP 代碼將排序后的商品列表內容組裝成一個 HTML 字符串，并返回給前端。

// sort_product_list.php
$products = array(
array("name" =>"商品1", "price" =>10),
array("name" =>"商品2", "price" =>8),
array("name" =>"商品3", "price" =>15)
);
usort($products, function($a, $b){
return $a["price"] - $b["price"];
});
$html = "";
foreach($products as $product){
$html .= "
".$product["name"]."".$product["price"]."
";
}
echo $html;

通過以上的實現，我們就能夠實現點擊將內容排序的功能了。當用戶點擊價格字段時，頁面將通過 Ajax 向后端發送請求，并獲取排序后的商品列表。然后，將排序后的商品列表更新到頁面上，完成排序功能的實現。