如何使用php和ajax按位置创建筛选器(使用复选框)
如何使用php和ajax按位置创建筛选器(使用复选框)
提问于 2017-08-21 11:05:33
我的酒店网页上没有几个复选框。我想做一个简单的过滤器位置过滤器引擎。像这样.
结果应该是复选框的组合。现在的问题是，我试图用这种方式编写代码，但无法实现我的wanted.when，我在第一个复选框上选中了它，它显示了相同的结果，但是当我取消选中时，显示的数据不会更改为默认。我需要为此添加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>";
}
}
?>回答 1
Stack Overflow用户
回答已采纳
发布于 2017-08-21 11:54:34
- 如果您真的不需要随机顺序，就不要执行
ORDER BY RAND()，因为这些quereis不会被缓存。 - 做一堆
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 }还有几件不直接相关的事情：
- 考虑使用PDO
- 我的例子不包括数据卫生和验证。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45795509
复制相关文章
相似问题
腾讯云开发者
