实现搜索结果按字母排序：PHP结合Ajax的专业教程-php教程-PHP中文网

实现搜索结果按字母排序：PHP结合Ajax的专业教程

聖光之護

发布： 2025-10-05 16:09:01

原创

671人浏览过

实现搜索结果按字母排序：php结合ajax的专业教程

本文档旨在提供一种使用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免费学习笔记（深入）”；

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

查看详情

<?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 等字段。