Question

最近我提出了同样的问题，但这是一个改进的问题。我在我的网页上有一些选择选项，并且当有人选择我希望从数据库中获取数据的选项时。我试图做，但我只为一个选择提供数据。如果我想用3个选择字段的组合获取数据该怎么办？我怎样才能做到这一点。请帮忙!!!

这是我的HTML

-inf

这是我的脚本 -

<!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>

最后这是我的action.php

 $(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);
            }
        });
    });
});

谢谢！

Answer 1

如果您希望PHP将$ _GET / $ _ POST [＆＃39; select2＆＃39;]视为一个选项数组，只需在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个可能的后置变量的值，并根据这些值开始构建查询。它有助于将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 */

这也不需要您设置房间值，因为它仍然会对所有项目执行查询。

如何过滤多列mysql数据并使用php和ajax在网页上显示

2 个答案: