如何使用 php 和 ajax 创建按位置筛选（使用复选框）引擎

Question

我的酒店网页上几乎没有复选框。我想制作一个简单的 FILTER BY LOCATION 过滤引擎。看起来像这样 ---

结果应该是复选框的组合。 现在的问题是我尝试以这种方式进行编码，但无法实现我想要的。当我选中第一个复选框时，它会显示相同的结果，但是当我取消选中它时，显示的数据不会更改回默认值。我需要为此添加 sql 查询，但我不知道要添加什么（逻辑）。请帮忙 ... 这是我的 HTML -

<div class="container main-section" id="main">
        <div class="row">
            <div class="col-md-4">
                <h4>Filter by Location </h4>
                <input type="checkbox" id="calangute" name="calangute" />
                <label for="calangute"> Calangute</label><br>
                <input type="checkbox" id="baga" name="baga">
                <label for="baga"> Baga</label><br>
                <input type="checkbox" id="morjim" name="morjim">
                <label for="morjim"> Morjim</label><br>
                <input type="checkbox" id="candolim" name="candolim">
                <label for="candolim"> Candolim</label><br>
                <input type="checkbox" id="anjuna" name="anjuna">
                <label for="anjuna"> Anjuna</label><br>
            </div>
        </div>
    </div>
    <div class="display">
    </div>

这是我的 JQuery--

$(document).ready(function(){
getAllRooms(); // this is for getting all data on page load
function getAllRooms(){
    $.ajax({
        url:'action.php',
        method: 'POST',
        data:{rooms:1},
        success:function(response){
            $('.display').html(response);
        }
    });
}

//这里获取有关检查复选框的数据

function getRooms(){
        var calangute = $('#calangute').is(':checked') ? 'calangute' : '';
        var baga = $('#baga').is(':checked') ? 'baga' : '';
        var morjim = $('#morjim').is(':checked') ? 'morjim' : '';
        var candolim = $('#candolim').is(':checked') ? 'candolim' : '';
        var anjuna = $('#anjuna').is(':checked') ? 'anjuna' : '';
        $.ajax({
            url: 'action.php',
            method: 'POST',
            data: {
                calangute  : calangute,
                baga : baga,
                morjim : morjim,
                candolim : candolim,
                anjuna : anjuna,
            },
            success:function(response){
                $('.display').html(response);
            }
        });


    }
    $('#calangute').change(function(){
        getRooms();
    });
    $('#baga').change(function(){
        getRooms();
    });
    $('#morjim').change(function(){
        getRooms();
    });
    $('#candolim').change(function(){
        getRooms();
    });
    $('#anjuna').change(function(){
        getRooms();
    });


});

这是我的 PHP --

   <?php
$conn=mysqli_connect('localhost','cms_user','12345','rooms');

// this is for getting all data on page load
if (isset($_POST['rooms'])){
    if (isset($_POST['rooms'])){
        $query_all = "SELECT * FROM rooms ORDER BY rand() ";
    }    
    $query_run = mysqli_query($conn,$query_all);
    if (mysqli_num_rows($query_run)>0){
        while ($row = mysqli_fetch_array($query_run)){
            $room_id = $row['id'];
            $room_name = $row['name'];
            $location = $row['location'];
            $stay_type = $row['stay_type'];
            $room_type = ucfirst($row['room_type']);
            $image = $row['image'];
            $price = $row['price'];

            echo "
            <div class='container rooms'>
            <div class='row'>
            <div class='col-md-4'>
            <img src='img/$image' alt='room' width='100%'>
        </div>
        <div class='col-md-6'>
            <h2>$room_name</h2>
            <p>$stay_type</p>
            <h4 class='text-success'>$location</h4>

        </div>
        <div class='col-md-2'>
           <br><br><br><br>
            <h4 class='text-primary'>$room_type</h4>
            <h4>Rs : $price </h4>
           <a href='#'><input type='submit' name='book' value='Book Now' class='btn btn-success'></a>
        </div>
            </div></div>
            ";
        }
    } else {
        echo "<center><h3>No Properties available</h3></center>";
    }

}

//this is for getting data filtered by checkboxes

if (isset($_POST['calangute'])){
    $query = "SELECT * FROM rooms WHERE location = 'calangute' ";
    $run = mysqli_query($conn, $query);
    if (mysqli_num_rows($run)>0){
        while ($row = mysqli_fetch_array($run)){
            $room_id = $row['id'];
            $room_name = $row['name'];
            $location = $row['location'];
            $stay_type = $row['stay_type'];
            $room_type = ucfirst($row['room_type']);
            $image = $row['image'];
            $price = $row['price'];

            echo "
            <div class='container rooms'>
            <div class='row'>
            <div class='col-md-4'>
            <img src='img/$image' alt='room' width='100%'>
        </div>
        <div class='col-md-6'>
            <h2>$room_name</h2>
            <p>$stay_type</p>
            <h4 class='text-success'>$location</h4>

        </div>
        <div class='col-md-2'>
           <br><br><br><br>
            <h4 class='text-primary'>$room_type</h4>
            <h4>Rs : $price </h4>
           <a href='#'><input type='submit' name='book' value='Book Now' class='btn btn-success'></a>
        </div>
            </div></div>
            ";
        }
    }else {
        echo "<center><h3>No Properties available for your search </h3></center>";
    }
}

?>

Answer 1

1. 如果您并不真正需要随机顺序，则永远不要这样做，因为这些查询不会被缓存。

做一堆
2. ORDER BY RAND()

   也不是最好的主意。假设该页面上有 400 个过滤器。你的代码会是什么样子？ :)

我会这样做：

将过滤器值包装在容器中：

if

然后在服务器端：

$.ajax({
    url: 'action.php',
    method: 'POST',
    data: {
        locations: {
            calangute  : calangute,
            baga : baga,
            morjim : morjim,
            candolim : candolim,
            anjuna : anjuna,
        }
    },
    success:function(response){
        $('.display').html(response);
    }
});

还有其他一些不直接相关的事情：

考虑使用

PDO
1. 我的示例不包括数据清理和验证。