使用PHP和Ajax实现搜索结果的A-Z排序-php教程-PHP中文网

使用PHP和Ajax实现搜索结果的A-Z排序

碧海醫心

发布： 2025-10-06 13:25:46

原创

715人浏览过

使用php和ajax实现搜索结果的a-z排序

在PHP搜索结果页面实现A-Z排序功能，可以极大地提升用户体验。结合Ajax技术和PHP后端排序逻辑，我们可以在不刷新页面的情况下实现排序功能。以下将详细介绍实现步骤。

1. 前端：创建排序表单和Ajax请求

首先，需要在 search.php 页面中创建一个表单，用于触发排序操作。这个表单可以包含一个下拉列表或按钮，允许用户选择排序方式（A-Z）。同时，我们需要使用 JavaScript (通常使用 jQuery 简化操作) 监听表单提交事件，并发送 Ajax 请求到后端。

<form id="sortForm" method="post">
    <button type="button" id="sortAZ">Sort A-Z</button>
    <input type="hidden" name="original_post_data" id="originalPostData" value="">
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    // 保存原始POST数据
    var originalPostData = <?php echo json_encode($_POST); ?>;
    $('#originalPostData').val(JSON.stringify(originalPostData));

    $('#sortAZ').click(function(e) {
        e.preventDefault(); // 阻止默认表单提交

        var postData = JSON.parse($('#originalPostData').val());
        postData.sort_order = 'az'; // 添加排序参数

        $.ajax({
            type: 'POST',
            url: 'search.php', // 当前页面
            data: postData,
            success: function(response) {
                // 更新页面内容
                $('body').html(response); // 替换整个body，或者更精确地替换结果区域
            },
            error: function(xhr, status, error) {
                console.error("Ajax request failed:", status, error);
            }
        });
    });
});
</script>

登录后复制

代码解释：

<form id="sortForm" method="post">: 定义一个表单，用于触发排序。
<button type="button" id="sortAZ">Sort A-Z</button>: 排序按钮，点击触发排序事件。
<input type="hidden" name="original_post_data" id="originalPostData" value="">: 隐藏字段，存储原始的 POST 数据，以便在排序时传递。
var originalPostData = <?php echo json_encode($_POST); ?>;: 使用 PHP 将原始的 POST 数据转换为 JSON 字符串，并赋值给 JavaScript 变量。
$('#originalPostData').val(JSON.stringify(originalPostData));: 将 JSON 字符串存储在隐藏字段中。
$('#sortAZ').click(function(e) { ... });: 为排序按钮绑定点击事件。
e.preventDefault();: 阻止表单的默认提交行为。
var postData = JSON.parse($('#originalPostData').val());: 从隐藏字段中获取原始的 POST 数据，并解析为 JavaScript 对象。
postData.sort_order = 'az';: 添加一个名为 sort_order 的参数，值为 az，用于指示后端进行 A-Z 排序。
$.ajax({...});: 使用 jQuery 的 $.ajax 函数发送 Ajax 请求。
- type: 'POST': 指定请求类型为 POST。
- url: 'search.php': 指定请求 URL 为当前页面。
- data: postData: 将包含原始 POST 数据和排序参数的 JavaScript 对象作为请求数据发送。
- success: function(response) { ... }: 定义请求成功时的回调函数，用于更新页面内容。这里简单粗暴地替换了整个body，实际项目中应当只替换显示结果的区域。
- error: function(xhr, status, error) { ... }: 定义请求失败时的回调函数，用于处理错误。

2. 后端：PHP排序逻辑

在 search.php 页面中，我们需要修改 PHP 代码，以处理 Ajax 请求并对结果进行排序。

纳米搜索

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

查看详情

立即学习“PHP免费学习笔记（深入）”；

<?php
include 'models/doctors.class.php';
// error_reporting(0);
$search = new doctors();
if(isset($_POST['submit']) || isset($_POST['sort_order'])){
    $post_data = $_POST;
    unset($post_data['sort_order']); // 移除排序参数，避免影响原始查询
    $s= $search->filterDoctors($post_data);

    // 检查是否存在排序参数
    if (isset($_POST['sort_order']) && $_POST['sort_order'] === 'az') {
        usort($s, function($a, $b) {
            return strcmp($a['full_name'], $b['full_name']);
        });
    }

    // ... (后续的 HTML 输出代码，循环遍历 $s 并显示结果)
?>
<!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/<a class="__cf_email__" data-cfemail="9bf9f4f4efe8efe9faebdbaeb5abb5a9" href="/cdn-cgi/l/email-protection">[email protected]</a>/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/<a class="__cf_email__" data-cfemail="32505d5d4641464053421f5b515d5c4172031c011c02" href="/cdn-cgi/l/email-protection">[email protected]</a>/font/bootstrap-icons.css">
    <link href="https://cdn.jsdelivr.net/npm/<a class="__cf_email__" data-cfemail="6d0f0202191e191f0c1d2d58435d435f" href="/cdn-cgi/l/email-protection">[email protected]</a>/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/2.1.1/jquery.min.js"></script>
    <title>Healthcare</title>
</head>

<body>
    <!-- <section>
        <div class="container-fluid firstSectionn">
            <div class="popins-font">
                <p class="searchHere text-center"><i class="bi bi-arrow-left-short pull-left"></i>Zürich <i class="bi bi-chat-dots pull-right"></i></p>
            </div>
        </div> -->
    <section>
        <div class="container-fluid thisContainerBGColor popins-font">
            <div class="row">
                <div class="col text-center pt-4 pb-3">
                <a href="#" onclick="history.go(-1)" class="text-decoration-none text-light"> <i
                            class="bi bi-arrow-left-short"></i></a>
                </div>
                <div class="col text-center lh-1 pt-3 pb-3">
                    <span class="span-selected-area">Selected area</span> <br>
                    <span class="span-place">
                        <?php
                            $i = 0;
                            foreach($s as $row){
                                echo $row['location'];
                                $i++;
                                if($i == 1){
                                    break;
                                }
                            }
                        ?>
                    </span>
                </div>

                <div class="col text-center pt-4 pb-3">
                    <!-- <i class="bi bi-chat-dots"></i> -->
                </div>
            </div>
        </div>
    </section>
    </section>
    <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>
                        <!-- <a href="#" class="text-decoration-none">
                            <p class="fs-6 popins-font fw-bold" id="text-color">See all</p>
                        </a> -->
                    </div>
                </div>
            </div>
        </section>
        <a href="#" class="btn btn-primary">Filter-A-Z</a>
        <div>
        <?php
        if(isset($_SESSION['msg'])){
            echo $_SESSION['msg'];
            unset($_SESSION['msg']);
        }
        ?>
        </div>
        <section>
            <div class="container">
                <?php
                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 {
                header("Location:therapist-list.php");
            }
            ?>
        </section>

登录后复制

代码解释：

if (isset($_POST['sort_order']) && $_POST['sort_order'] === 'az') { ... }: 检查是否存在名为 sort_order 的 POST 参数，并且其值是否为 az。如果是，则执行排序逻辑。
usort($s, function($a, $b) { ... });: 使用 PHP 的 usort 函数对 $s 数组进行排序。usort 函数接受一个数组和一个比较函数作为参数。
function($a, $b) { return strcmp($a['full_name'], $b['full_name']); }: 定义一个匿名函数作为比较函数。该函数使用 strcmp 函数比较两个数组元素的 full_name 字段，实现 A-Z 排序。
strcmp($a['full_name'], $b['full_name']): PHP的字符串比较函数，如果 $a['full_name'] 小于 $b['full_name']，则返回一个小于 0 的值；如果 $a['full_name'] 大于 $b['full_name']，则返回一个大于 0 的值；如果相等，则返回 0。