如何使用AJAX、PHP和MySQL使过滤器协同工作
我有一个显示用户列表的表格，我正在尝试使用selectbox创建一些过滤器，以使用一些参数进行过滤。我用一个PHP脚本构建这个表，我用AJAX调用它。当用户单击其中一个选择框时，此AJAX被激活 以下是过滤器：如何使用AJAX、PHP和MySQL使过滤器协同工作,php,mysql,ajax,Php,Mysql,Ajax,我有一个显示用户列表的表格，我正在尝试使用selectbox创建一些过滤器，以使用一些参数进行过滤。我用一个PHP脚本构建这个表，我用AJAX调用它。当用户单击其中一个选择框时，此AJAX被激活 以下是过滤器： <div class="col-lg-6"> <select class="form-control filter" name="category" id="category">
<div class="col-lg-6">
<select class="form-control filter" name="category" id="category">
<option>All</option>
<option>Abraham</option>
<option>Kevin</option>
<option>Eric</option>
</select>
</div>
<div class="col-lg-6">
<select class="form-control filter" name="datePeriod" id="datePeriod">
<option>Today</option>
<option>Yesterday</option>
<option>Last 7 days</option>
<option>Last month</option>
<option>Last year</option>
</select>
</div>
<div class="col">
<div id="output"></div>
</div>
<?php
//Getting $datePeriod value for query
if(isset($_GET['filters']) && $_GET['filters'] == "Today" && $_GET['filters'] == "All"){
$datePeriod = 'AND DATE(VISIT_DATE) = CURDATE()';
$category = "";
}
if(isset($_GET['filters']) && $_GET['filters'] == "Yesterday"){
$datePeriod = 'AND VISIT_DATE >= DATE(NOW()) - INTERVAL 1 DAY';
}
if(isset($_GET['filters']) && $_GET['filters'] == "Last 7 days"){
$datePeriod = 'AND VISIT_DATE >= DATE(NOW()) - INTERVAL 7 DAY';
}
if(isset($_GET['filters']) && $_GET['filters'] == "Last month"){
$datePeriod = 'AND VISIT_DATE >= DATE(NOW()) - INTERVAL 1 MONTH';
}
if(isset($_GET['filters']) && $_GET['filters'] == "Last year"){
$datePeriod = 'AND VISIT_DATE >= DATE(NOW()) - INTERVAL 1 YEAR';
}
//Getting $category value for query
if(isset($_GET['filters']) && $_GET['filters'] == "All"){
$category = "";
}
if(isset($_GET['filters']) && $_GET['filters'] == "Abraham"){
$category = "AND VISIT_REASON='Abraham'";
}
if(isset($_GET['filters']) && $_GET['filters'] == "Kevin"){
$category = "AND VISIT_REASON='Kevin'";
}
if(isset($_GET['filters']) && $_GET['filters'] == "Eric"){
$category = "AND VISIT_REASON='Eric'";
}
include('conn.php');
mysqli_set_charset($conn, 'utf8');
$orderBy = 'ORDER BY VISIT_DATE DESC';
$sql = "SELECT * FROM queue WHERE ATTENDED='1' ".$category." ".$datePeriod." ".$orderBy." ";
$result = mysqli_query($conn, $sql);
//$ID = 'ID';
$GUEST_NAME = 'GUEST_NAME';
$GUEST_PHONE = 'GUEST_PHONE';
$VISIT_REASON = 'VISIT_REASON';
$VISIT_DATE = 'VISIT_DATE';
echo '<table class="table table-striped">';
echo "<tr>";
//echo '<th scope="col">ID</th>';
echo '<th scope="col">Name</th>';
echo '<th scope="col">Phone</th>';
echo '<th scope="col">Attended by</th>';
echo '<th scope="col">Visit Date</th>';
echo "</tr>";
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
//echo "<td>$row[$ID]</td>";
echo "<td>$row[$GUEST_NAME]</td>";
echo "<td>$row[$GUEST_PHONE]</td>";
echo "<td>$row[$VISIT_REASON]</td>";
echo "<td style='text-transform:uppercase;'>".date('M-d-Y g:i a', strtotime(str_replace('-','/', $row['VISIT_DATE'])))."</td>";
echo "</tr>";
}
} else {
echo "<td style='text-transform: none;'>No records to show.</td>";
}
echo '</table>';
mysqli_close($conn);
?>
我不知道我是否做得不对。也许我没有以正确的方式构建查询。我将非常感谢您的帮助或指导。虽然您的问题没有一个完整的解决方案，但以下内容应该能让您对如何完成解决方案有一个很好的了解。我不使用jQuery，所以下面我选择使用一个简单的ajax函数。我认为您可能最感兴趣的是states变量，它存储通过查询DOM找到的页面~上使用的任何选择菜单的名称/值。存储在该变量中的值将在ajax请求中使用，因此PHP代码中的所有值都是可用的，不会出现上述错误 您可以复制并按原样运行它，看看它是如何工作的，然后采用、调整和改进以满足您的需要
<?php
/* Process ajax request */
if( $_SERVER['REQUEST_METHOD']=='GET' && isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && $_SERVER['HTTP_X_REQUESTED_WITH']=='XMLHttpRequest' ){
ob_clean();
$args=array(
'category' => FILTER_SANITIZE_STRING,
'datePeriod' => FILTER_SANITIZE_STRING
);
$_GET = filter_input_array( INPUT_GET, $args );
extract( $_GET );
echo $category . ' ' . $datePeriod;
/* process these variables to construct your sql query */
exit();
}
?>
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>ajax filtering idea</title>
<script>
document.addEventListener('DOMContentLoaded',function(){
/* Create a nodelist collection of select menus according to class "filter" */
var col=document.querySelectorAll( 'select.filter' );
/* Placeholder object to store the state of any menu that is changed */
var states={};
/* Iterate through nodelist collection and assign event listener to each */
Array.prototype.slice.call( col ).forEach( function( menu ){
/* store initial state of all menus */
states[ menu.name ]=menu.value;
menu.addEventListener('change',function(e){
/* store this menu name & value after change */
states[ e.target.name ]=e.target.value;
/* send ajax request */
ajax.call( this, location.href, states, callback )
},false );
});
},false);
/* basic ajax function */
function ajax( url, payload, callback ){
var xhr=new XMLHttpRequest();
var params=[];
for( var p in payload )params.push( p + '=' + payload[ p ] );
xhr.onreadystatechange=function(){if( this.readyState==4 && this.status==200 )callback.call( this, this.response );};
xhr.open( 'GET', url + '?' + params.join('&'), true );
xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send( null );
}
/* very simple callback */
var callback=function(r){
document.getElementById('output').innerHTML=r
};
</script>
</head>
<body>
<div class="col-lg-6">
<select class="form-control filter" name="category" id="category">
<option>All</option>
<option>Abraham</option>
<option>Kevin</option>
<option>Eric</option>
</select>
</div>
<div class="col-lg-6">
<select class="form-control filter" name="datePeriod" id="datePeriod">
<option>Today</option>
<option>Yesterday</option>
<option>Last 7 days</option>
<option>Last month</option>
<option>Last year</option>
</select>
</div>
<div class="col">
<div id="output"></div>
</div>
</body>
</html>
每次更改两个筛选器时，您都需要发送它们： JS: PHP:
有道理。优秀的解决方案。非常感谢你！
<?php
/* Process ajax request */
if( $_SERVER['REQUEST_METHOD']=='GET' && isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && $_SERVER['HTTP_X_REQUESTED_WITH']=='XMLHttpRequest' ){
ob_clean();
$args=array(
'category' => FILTER_SANITIZE_STRING,
'datePeriod' => FILTER_SANITIZE_STRING
);
$_GET = filter_input_array( INPUT_GET, $args );
extract( $_GET );
echo $category . ' ' . $datePeriod;
/* process these variables to construct your sql query */
exit();
}
?>
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>ajax filtering idea</title>
<script>
document.addEventListener('DOMContentLoaded',function(){
/* Create a nodelist collection of select menus according to class "filter" */
var col=document.querySelectorAll( 'select.filter' );
/* Placeholder object to store the state of any menu that is changed */
var states={};
/* Iterate through nodelist collection and assign event listener to each */
Array.prototype.slice.call( col ).forEach( function( menu ){
/* store initial state of all menus */
states[ menu.name ]=menu.value;
menu.addEventListener('change',function(e){
/* store this menu name & value after change */
states[ e.target.name ]=e.target.value;
/* send ajax request */
ajax.call( this, location.href, states, callback )
},false );
});
},false);
/* basic ajax function */
function ajax( url, payload, callback ){
var xhr=new XMLHttpRequest();
var params=[];
for( var p in payload )params.push( p + '=' + payload[ p ] );
xhr.onreadystatechange=function(){if( this.readyState==4 && this.status==200 )callback.call( this, this.response );};
xhr.open( 'GET', url + '?' + params.join('&'), true );
xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send( null );
}
/* very simple callback */
var callback=function(r){
document.getElementById('output').innerHTML=r
};
</script>
</head>
<body>
<div class="col-lg-6">
<select class="form-control filter" name="category" id="category">
<option>All</option>
<option>Abraham</option>
<option>Kevin</option>
<option>Eric</option>
</select>
</div>
<div class="col-lg-6">
<select class="form-control filter" name="datePeriod" id="datePeriod">
<option>Today</option>
<option>Yesterday</option>
<option>Last 7 days</option>
<option>Last month</option>
<option>Last year</option>
</select>
</div>
<div class="col">
<div id="output"></div>
</div>
</body>
</html>
$(document).ready(function(){
$('.filter').change(function(){
$.ajax({
type: "GET",
url: "processes/filters.php",
data: {
category: $('#category').val(),
datePeriod: $('#datePeriod').val(),
},
success: function(result){
$("#output").html(result);
}
});
});
$("#datePeriod").trigger("change");
});
<?php
if($_GET['category'] == "All"){
$category = "";
} else if($_GET['category'] == "Abraham"){
$category = "AND VISIT_REASON='Abraham'";
} else if( $_GET['category'] == "Kevin"){
$category = "AND VISIT_REASON='Kevin'";
} else if($_GET['category'] == "Eric"){
$category = "AND VISIT_REASON='Eric'";
} else {
$category = '';
}
if($_GET['datePeriod'] == "Today"){
$datePeriod = 'AND DATE(VISIT_DATE) = CURDATE()';
} else if($_GET['datePeriod'] == "Yesterday"){
$datePeriod = 'AND VISIT_DATE >= DATE(NOW()) - INTERVAL 1 DAY';
} else if($_GET['datePeriod'] == "Last 7 days"){
$datePeriod = 'AND VISIT_DATE >= DATE(NOW()) - INTERVAL 7 DAY';
} else if($_GET['datePeriod'] == "Last month"){
$datePeriod = 'AND VISIT_DATE >= DATE(NOW()) - INTERVAL 1 MONTH';
} else if($_GET['datePeriod'] == "Last year"){
$datePeriod = 'AND VISIT_DATE >= DATE(NOW()) - INTERVAL 1 YEAR';
} else {
$datePeriod = '';
}
// the rest of the file