本文档旨在提供一种使用PHP和Ajax对通过POST方法获取的搜索结果进行A-Z排序的解决方案。我们将创建一个表单，保存POST数据，并利用PHP函数对医生列表进行排序，最终通过Ajax实现无需刷新页面的排序功能。
1. 修改 search.php 文件
首先，我们需要在 search.php 文件中添加一个表单，用于触发排序操作。同时，我们需要隐藏域来保存之前的POST数据，以便在排序后仍然能保持之前的搜索条件。
<?php
include 'models/doctors.class.php';
// error_reporting(0);
$search = new doctors();
$s = []; // Initialize $s
$post_data = [];
if(isset($_POST['submit'])){
$post_data = $_POST; // Store the POST data
$s= $search->filterDoctors($_POST);
}
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/search.css">
<link rel="stylesheet" href="assets/css/sanascout-font.css">
<link rel="icon" type="image/png" href="assets/images/logo-ssc1.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Healthcare</title>
</head>
<body>
<!-- ... (之前的HTML代码) ... -->
<section>
<section class="searched-area mt-4">
<div class="container">
<div class="header66">
<div style="display: flex; justify-content: space-between;">
<p class="fs-6 popins-font fw-bold" id="text-color">Available Doctors</p>
</div>
</div>
</div>
</section>
<form id="sortForm" method="post" action="">
<?php
foreach ($post_data as $key => $value) {
echo '<input type="hidden" name="' . htmlspecialchars($key) . '" value="' . htmlspecialchars($value) . '">';
}
?>
<button type="button" id="sortAZ" class="btn btn-primary">Filter A-Z</button>
</form>
<div>
<?php
if(isset($_SESSION['msg'])){
echo $_SESSION['msg'];
unset($_SESSION['msg']);
}
?>
</div>
<section id="doctorList">
<div class="container">
<?php
if(isset($s) && is_array($s)){
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 "<p>No doctors found.</p>";
}
?>
</div>
</section>
</section>
<!-- ... (剩余的HTML代码) ... -->
<script>
$(document).ready(function() {
$("#sortAZ").click(function(e) {
e.preventDefault(); // Prevent the default form submission
$.ajax({
type: "POST",
url: "sort_doctors.php",
data: $("#sortForm").serialize() + "&sort=az", // Serialize the form data and add a sort parameter
success: function(data) {
$("#doctorList").html(data); // Update the doctor list with the sorted data
},
error: function(xhr, status, error) {
console.error("AJAX Error:", status, error);
}
});
});
});
</script>
</body>
</html>关键修改说明：
- 表单创建： 创建了一个id为sortForm的表单，包含了所有通过POST方法传递过来的参数，使用了隐藏域来保存这些参数。
- 排序按钮： 使用了一个按钮触发排序，并阻止了表单的默认提交行为。
- Ajax请求： 使用jQuery的$.ajax()函数向sort_doctors.php发送POST请求，并传递表单数据和排序标志。
- 结果更新： 在Ajax成功回调中，使用返回的数据更新医生列表的HTML内容。
- 错误处理： 添加了Ajax错误处理，方便调试。
2. 创建 sort_doctors.php 文件
接下来，创建 sort_doctors.php 文件来处理排序逻辑。
立即学习“PHP免费学习笔记（深入）”；
<?php
include 'models/doctors.class.php';
$search = new doctors();
// Retrieve the POST data
$post_data = $_POST;
// Check if sorting is requested
if (isset($post_data['sort']) && $post_data['sort'] == 'az') {
// Filter the doctors based on the POST data
$doctors = $search->filterDoctors($post_data);
// Sort the doctors array alphabetically by full_name
usort($doctors, function($a, $b) {
return strcmp($a['full_name'], $b['full_name']);
});
// Generate the HTML for the sorted doctor list
$output = '<div class="container">';
foreach ($doctors as $row1) {
$output .= '<a href="therapist.php?id=' . $row1['User_ID'] . '" class="text-decoration-none">';
$output .= '<div class="therapistCardOne mx-2 popins-font my-2">';
$output .= '<div class="row py-2">';
$output .= '<div class="col-3 g-0">';
$output .= '<div class="imgW text-center g-0 ps-2">';
$output .= '<img src="assets/images/006.png" class="img-fluid ms-2" alt="" width="70px" height="80px">';
$output .= '</div>';
$output .= '</div>';
$output .= '<div class="col-8 g-0 ps-2">';
$output .= '<span class="span1">' . $row1['full_name'] . '</span>';
$output .= '<span class="ps-2">';
$output .= '<i class="bi bi-star-fill icon-ccc"></i>';
$output .= '<i class="bi bi-star-fill icon-ccc"></i>';
$output .= '<i class="bi bi-star-fill icon-ccc"></i>';
$output .= '<i class="bi bi-star-fill icon-ccc"></i>';
$output .= '<i class="bi bi-star icon-ccc"></i>';
$output .= '</span><br>';
$output .= '<span class="span2">Location : ' . $row1['location'] . '</span> <br>';
$output .= '<span class="span3"><i class="bi bi-clock icon-cc"></i> 12:00pm - 16:00pm</span>';
$output .= '<span class="span4 ps-2"><i class="bi bi-geo-alt icon-cc"></i> Zurich New Clinic</span>';
$output .= '</div>';
$output .= '<div class="col-1 g-0 pe-2">';
$output .= '<i class="bi bi-three-dots-vertical"></i>';
$output .= '</div>';
$output .= '</div>';
$output .= '</div>';
$output .= '</a>';
}
$output .= '</div>';
echo $output;
} else {
echo "<p>Invalid request.</p>";
}
?>关键说明：
- 包含类文件： 确保包含了 doctors.class.php 文件。
- 获取POST数据： 获取通过POST方法传递过来的数据。
- 排序判断： 检查是否存在 sort 参数且值为 az，以确定是否需要排序。
- 调用 filterDoctors 函数： 使用之前存储的POST数据调用 filterDoctors 函数，获取医生列表。
- 使用 usort 进行排序： 使用 usort 函数和一个自定义的比较函数，按照 full_name 字段进行字母排序。
- 生成HTML： 循环遍历排序后的医生列表，动态生成HTML代码。
- 输出HTML： 将生成的HTML代码输出到客户端。
3. doctors.class.php 文件 (假设)
这是一个示例 doctors.class.php 文件的内容，你需要根据你的实际情况进行修改。
<?php
class doctors {
// 示例数据，替换成你的数据库查询逻辑
private $doctors_data = [
['User_ID' => 1, 'full_name' => 'Dr. Charlie', 'location' => 'Zurich'],
['User_ID' => 2, 'full_name' => 'Dr. Alice', 'location' => 'Geneva'],
['User_ID' => 3, 'full_name' => 'Dr. Bob', 'location' => 'Bern'],
];
public function filterDoctors($post_data) {
// 这里应该根据 $post_data 中的条件从数据库查询医生信息
// 为了示例，我们简单返回所有医生
return $this->doctors_data;
}
}
?>重要说明：
- filterDoctors 函数： 这个函数负责根据POST数据中的条件从数据库查询医生信息。你需要根据你的实际数据库结构和查询逻辑来修改这个函数。
- 数据库连接： 在 filterDoctors 函数中，你需要建立数据库连接，并执行查询操作。
- 数据返回： filterDoctors 函数应该返回一个包含医生信息的数组，每个元素代表一个医生，包含 User_ID、full_name、location 等字段。
4. 注意事项和总结
- 安全性： 在实际应用中，务必对POST数据进行严格的验证和过滤，防止SQL注入等安全问题。
- 错误处理： 添加完善的错误处理机制，例如数据库连接失败、查询错误等情况。
- 性能优化： 对于大量数据的排序，可以考虑使用数据库的排序功能，或者使用更高效的排序算法。
- 用户体验： 可以添加加载动画，提升用户体验。
通过以上步骤，你就可以实现使用PHP和Ajax对搜索结果进行A-Z排序的功能。这种方法可以在不刷新页面的情况下，动态更新医生列表，提升用户体验。记住，代码示例只是一个起点，你需要根据你的实际情况进行修改和完善。
