如何使用php和ajax過濾多列mysql數據並顯示在網頁上

Question

最近我問了同樣的問題，但這是一個改進的問題。 我在網頁上有一些選擇選項，並且當有人選擇選項時，我想從數據庫中獲取相同的數據。 我試着做，但是我只能選擇一種。 如果我想通過3個選擇字段的組合來獲取數據怎么辦。 我怎么能做到這一點。 請幫忙！！！

這是我的html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Filter</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" >

        <link rel="stylesheet" href="css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
    </head>
    <body>
        <div id="rooms"></div>

        <div class="container main-section" id="main">

            <div class="row">
                <div class="col-md-3">

                    <div class="form-group">
                        <label for="location">Location:</label>
                        <select name="location" id="location" class="form-control">
                            <option value="">Select</option>
                            <option value="candolim">Candolim</option>
                            <option value="calangute">Calangute</option>
                            <option value="baga">Baga</option>
                            <option value="anjuna">Anjuna</option>
                            <option value="morjim">Morjim</option>
                        </select>
                    </div>

                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="stay_type">Property Type:</label>
                        <select name="stay_type" id="stay_type" class="form-control">
                            <option value="">Select</option>
                            <option value="hotel">Hotel</option>
                            <option value="villa">Villa</option>
                            <option value="studio">Studio</option>
                            <option value="resort">Resort</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="room_type">Room Type:</label>
                        <select name="room_type" id="room_type" class="form-control">
                            <option value="">Select</option>
                            <option value="standard">Standard</option>
                            <option value="deluxe">Deluxe</option>
                            <option value="suit">Suit</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group"><br>
                        <input type="submit" name="submit" value="Search" class="btn btn-success">
                    </div>

                </div>
            </div>

        </div>

        <div class="display">


        </div>

        <script src="js/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <script src="js/script.js" type="text/javascript"></script>
    </body>
</html>

這是我的劇本-

 $(document).ready(function(){
    getAllRooms();
    function getAllRooms(){
        $.ajax({
            url:'action.php',
            method: 'POST',
            data:{rooms:1},
            success:function(response){
                $('.display').html(response);
            }
        });
    }

    $('#location').change(function(){
        var location = $(this).val();
        $.ajax({
            url:'action.php',
            method: 'POST',
            data:{location:location},
            success:function(response){
                $('.display').html(response);
            }
        });
    });
});

最后是我的action.php

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


if (isset($_POST['rooms']) || isset($_POST['location'])){
    if (isset($_POST['rooms'])){
        $query_all = "SELECT * FROM rooms ORDER BY rand() ";
    }
    if(isset($_POST['location'])){
        $location = $_POST['location'];
        $query_all = "SELECT * FROM rooms WHERE location = '$location' 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>";
    }

} 


?>

謝謝！

Answer 1

如果您希望PHP將$ _GET / $ _ POST ['select2']視為選項數組，只需在方括號中將select元素的名稱添加方括號，如下所示：

然后，您可以在PHP腳本中訪問數組

 <?php
 header("Content-Type: text/plain");

 foreach ($_GET['select2'] as $selectedOption)
 echo $selectedOption."\n";

$ _GET可以用$ _POST代替，具體取決於

Answer 2

在您的jquery中，您應該對所有3個選擇框都具有一個.change函數-當任何一個選擇框發生變化時，都應將所有3個值都發送並發送到您的php頁面。

$(document).ready(function(){
    getRooms();
    function getRooms(){
        var location  = $('#location').val();
        var stay_type = $('#stay_type').val();
        var room_type = $('#room_type').val();
        $.ajax({
            url: 'action.php',
            method: 'POST',
            data: {
                "location"  : location,
                "stay_type" : stay_type,
                "room_type" : room_type,
            },
            success:function(response){
                $('.display').html(response);
            }
        });
    }

    $('#location').change(function(){
        getRooms();
    }

    $('#room_type').change(function(){
        getRooms();
    }

    $('#stay_type').change(function(){
        getRooms();
    }
});

在您的php頁面中，獲取所有3個可能的post變量的值，然后根據這些值開始構建查詢。 它有助於將sql語句拆分為多個部分，然后在最后將它們組合在一起。

# setting parameters from the post
$room_type = isset($_POST['room_type']) ? $_POST['room_type'] : '';
$location  = isset($_POST['location'])  ? $_POST['location']  : '';
$stay_type = isset($_POST['stay_type']) ? $_POST['stay_type'] : '';

# defaults
$select = "SELECT * FROM rooms";
$where  = " WHERE 1 = 1"; # to have a default where that is always true
$order_by = " ORDER BY rand()"; # you can always change the order by this way

if ($room_type != '') {
    $where .= " AND room_type = '$room_type'";
}

if ($location != '') {
    $where .= " AND location = '$location'";
}

if ($stay_type != '') {
    $where .= " AND stay_type = '$stay_type'";
}

$sql = $select . $where . $order_by;

/* execute query using the $sql string and output results here */

這也將不需要您設置房間值，因為它將仍然對所有項目執行查詢。

如何使用php和ajax過濾多列mysql數據並顯示在網頁上

問題描述

2 個解決方案

解決方案1
0 2017-08-17 21:24:43

解決方案2
0 已采納 2017-08-17 21:47:33

如何使用php和ajax過濾多列mysql數據並顯示在網頁上

問題描述

2 個解決方案

解決方案1 0 2017-08-17 21:24:43

解決方案2 0 已采納 2017-08-17 21:47:33

解決方案1
0 2017-08-17 21:24:43

解決方案2
0 已采納 2017-08-17 21:47:33