javascript - 如何使用 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. 如果您真的不需要随机顺序，请不要执行 ORDER BY RAND()，因为这些查询不会被缓存。

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

下面是我会怎么做:

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

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

然后在服务器端:

<?php

// to remove empty values
$filter = isset($_POST['locations']) ? array_filter($_POST['locations']) : [];

$query = empty($filter)
    ? "SELECT * FROM rooms"
    : "SELECT * FROM rooms WHERE location IN ('".implode("', ", $filter)."')";

$run = mysqli_query($conn, $query);
if (mysqli_num_rows($run) > 0) {// display data }

还有一些不直接相关的事情:

1. 考虑使用 PDO
2. 我的示例不包括数据清理和验证。