本文档介绍如何使用 PHP 和 AJAX 对通过 POST 方法获取的搜索结果进行 A-Z 排序。我们将创建一个表单，保存 POST 数据，并使用 PHP 函数对医生列表进行排序，最终通过 AJAX 异步更新页面显示排序后的结果，提升用户体验。
1. 修改 search.php 添加排序表单
首先，在 search.php 页面中添加一个表单，用于触发排序操作。该表单包含一个隐藏域，用于保存原始的 POST 数据，以及一个排序按钮。
<form id="sortForm" method="post">
<input type="hidden" name="original_post_data" value="<?php echo htmlspecialchars(json_encode($_POST)); ?>">
<button type="button" id="sortButton" class="btn btn-primary">按 A-Z 排序</button>
</form>说明：
- original_post_data 隐藏域：将原始的 $_POST 数据进行 JSON 编码后存储，以便在排序时能够重新使用这些数据。使用 htmlspecialchars 函数进行转义，防止 XSS 攻击。
- sortButton 按钮：触发 AJAX 请求，执行排序操作。
2. 添加 JavaScript 代码处理排序请求
接下来，使用 JavaScript 代码监听排序按钮的点击事件，并使用 AJAX 发送请求到服务器。
立即学习“PHP免费学习笔记（深入）”；
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#sortButton").click(function(){
var originalPostData = $("input[name='original_post_data']").val();
$.ajax({
url: "sort_doctors.php", // 排序处理脚本
type: "POST",
data: {
sort: 'az', // 排序方式
original_post_data: originalPostData
},
success: function(data){
// 将排序后的结果更新到页面
$(".container").html(data); // 假设医生列表在 class="container" 的元素中
},
error: function(xhr, status, error) {
console.error("AJAX 请求失败: " + status + " - " + error);
}
});
});
});
</script>说明：
- 引入 jQuery 库，简化 AJAX 操作。
- 监听 sortButton 的点击事件。
- 获取 original_post_data 隐藏域的值。
- 使用 $.ajax 发送 POST 请求到 sort_doctors.php。
- 传递 sort 参数指定排序方式（'az' 表示 A-Z 排序）。
- 在 success 回调函数中，将服务器返回的排序后的结果更新到页面上。
- 在 error 回调函数中，处理 AJAX 请求失败的情况。
3. 创建 sort_doctors.php 处理排序逻辑
创建 sort_doctors.php 文件，用于处理排序逻辑。
<?php
include 'models/doctors.class.php';
$search = new doctors();
if(isset($_POST['sort']) && $_POST['sort'] == 'az' && isset($_POST['original_post_data'])) {
$originalPostData = json_decode($_POST['original_post_data'], true);
// 模拟 POST 请求
$_POST = $originalPostData;
$s = $search->filterDoctors($_POST);
// 对结果集按照 full_name 字段进行 A-Z 排序
usort($s, function($a, $b) {
return strcmp($a['full_name'], $b['full_name']);
});
// 输出排序后的结果
foreach($s as $row1){
?>
<a href="therapist.php?id=<?php echo $row1['User_ID']; ?>" class="text-decoration-none">
<div class="therapistCardOne mx-2 popins-font my-2">
<div class="row py-2">
<div class="col-3 g-0">
<div class="imgW text-center g-0 ps-2">
<img src="assets/images/006.png" class="img-fluid ms-2" alt="" width="70px"
height="80px">
</div>
</div>
<div class="col-8 g-0 ps-2">
<span class="span1"><?php echo $row1['full_name'];?></span>
<span class="ps-2">
<i class="bi bi-star-fill icon-ccc"></i>
<i class="bi bi-star-fill icon-ccc"></i>
<i class="bi bi-star-fill icon-ccc"></i>
<i class="bi bi-star-fill icon-ccc"></i>
<i class="bi bi-star icon-ccc"></i></span><br>
<span class="span2">Location :
<?php echo $row1['location'];?>
</span> <br>
<span class="span3"><i class="bi bi-clock icon-cc"></i> 12:00pm - 16:00pm</span> <span
class="span4 ps-2"><i class="bi bi-geo-alt icon-cc"></i> Zurich New Clinic</span>
</div>
<div class="col-1 g-0 pe-2">
<i class="bi bi-three-dots-vertical"></i>
</div>
</div>
</div>
</a>
<?php
}
} else {
echo "Invalid request.";
}
?>说明：
- 包含 doctors.class.php 文件。
- 检查 sort 参数是否为 'az'，以及 original_post_data 是否存在。
- 使用 json_decode 函数将 original_post_data 解码为 PHP 数组。
- 将解码后的数据赋值给 $_POST，模拟原始的 POST 请求。
- 调用 $search->filterDoctors($_POST) 函数获取医生列表。
- 使用 usort 函数对医生列表按照 full_name 字段进行 A-Z 排序。usort函数接受一个数组和一个比较函数作为参数。比较函数接收两个数组元素作为参数，并返回一个整数，表示它们的相对顺序。strcmp函数用于比较字符串。
- 循环遍历排序后的医生列表，并输出 HTML 代码。
- 如果请求无效，则输出错误信息。
4. 注意事项
- 确保 doctors.class.php 文件中的 filterDoctors 函数能够正确处理 POST 数据，并返回医生列表。
- 根据实际情况修改 HTML 代码，使其与你的页面结构相匹配。
- 可以添加错误处理机制，例如，当 AJAX 请求失败时，显示错误信息。
- 可以添加加载动画，提升用户体验。
- 如果需要支持其他排序方式，例如 Z-A 排序，可以添加相应的逻辑。
- original_post_data 隐藏域存储了敏感数据，需要进行适当的保护，例如，使用 HTTPS 协议传输数据。
总结
通过以上步骤，我们可以实现搜索结果按字母顺序排序的功能。该方案使用 AJAX 异步更新页面，避免了页面刷新，提升了用户体验。同时，该方案也具有一定的灵活性，可以方便地扩展到其他排序方式。
