Bootstrap 卡片过滤器 PHP/AJAX 问题

Question

我有一个网站页面，上面有 bootstrap 张卡片。卡片是动态生成的，但我想添加一个过滤器部分。我正在尝试使用 AJAX 来实现这一点，我已经到了这样的地步：当您 select 一个复选框时，它会触发加载器 gif，但加载器 gif 不会消失。通过数小时的调试，我可以看到问题出在 AJAX 调用调用的页面上，但我看不出问题出在哪里，控制台中也没有出现错误或任何内容。如果有人有任何想法，我将不胜感激，我已将我的代码粘贴在下面，而且我知道我的 sql 查询目前可以注入，只是想让它先工作。

<body>
<?php include("PHP/header.php"); ?>



<div class="container-fluid">


<div class="container" style="margin-top: 2%; text-align: center;"> 
<h1>Title goes here</h1>
Some tetx
<br/>
<br/>
<br/>

Filter Reviews:

<ul class="list-group">
<?php
$search = $conn->prepare("SELECT DISTINCT reviewcat FROM review_db ORDER BY reviewcat");
$search->execute(); 

while ($row = $search->fetch(PDO::FETCH_ASSOC)) {       
?>
<li class="list-group-item">
    <div class="form-check">
    <label class="form-check-label">
    <input type="checkbox" class="form-check-input product_check" value="<?=$row['reviewcat'];?>" id="reviewcat"> <?=$row['reviewcat']; ?>
    </label>
    </div>
</li>
<?php } ?>
</ul>

</div>
<br/><br/>  

<div class="row-fluid ">
    
    <h5 class="text-center" id="textChange"> All Products </h5>
    <hr>
    <div class="text-center">
        <img src="Images/loader.gif" id="loader" width="100" style="display: none">
    </div>
    
        
    
     <div id="result" class="card-deck card_group_style pt-4" >
         
     <?php

        
        $res_data = $conn->prepare("SELECT * FROM review_db");
        $res_data->execute();
        
    

       
    ?>
    
    <?php while ($row = $res_data->fetch(PDO::FETCH_ASSOC)) {// Important line !!! Check summary get row on array .. ?>
    

<div class="col-sm-6 col-lg-3 py-2">
    
<div class="card mb-4">
        
        
    
  <img class="card-img-top card-images " src="Images/Reviews/<?php echo $row['reviewimage1'];?>" alt="<?php echo $row['reviewtitle'];?>" >
  <div class="card-body">
    <h5 class="card-title"><?php echo $row['reviewtitle'];?></h5>
    <p class="card-text"><?php echo $row['reviewsynop'];?></p>
    

    
    <a href="Reviews/review-content.php?id=<?php echo $row['id'];?>&reviewtitle=<?php echo $row['reviewtitle'];?>" class="btn btn-primary my-4" >Read More</a>
    <div class="card-footer" style="padding: 1%;">
      <small class="text-muted">Submitted: <?php
          $my_date = $row['reviewsub'];
            $date = DATE("d/m/Y",strtotime($my_date));
            echo $date;?></small>
    </div>
  </div>
  
 
</div> 
</div>
    
    
    
    
    <?php } ?>
    
    
    
</div>



    
  
   


    </div>
    
</div>
<?php include("PHP/footer.php"); ?>

</div>

</body>

 <?php include("PHP/js.php"); ?>

<script>
$(document).ready(function(){
 $('#link-review,#link-footer-review').addClass('active');
});
</script>
<script type="text/javascript">
    $(document).ready(function(){
        
        function get_filter_text(text_id){
            var filterData = [];
            $('#'+text_id+':checked').each(function(){
                filterData.push($(this).val());
            });
            return filterData;
        }
        
        $(".product_check").click(function(){
            
            $("#loader").show();
            
            var action = 'data';
            var reviewcat = get_filter_text('reviewcat');
            
            $.ajax({
                method:'POST',
                url:'reviewaction.php',
                data:{action:action,reviewcat:reviewcat},
                success:function(response){
                    $("#result").html(response);
                    $("#loader").hide();
                    $("#textChange").text("Filtered Reviews");
                }
                
            });
            
        });
        
        
        
    });
</script>

</html>

reviewaction.php

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
include_once $_SERVER['DOCUMENT_ROOT'] . '/Private/db.php';

// $stmt = $conn->prepare("SELECT * FROM blogdata ORDER BY blogsub DESC");
// $stmt->execute();
?>
<?php
    
    if(isset($_POST['action'])){
        
        $sql = "SELECT * FROM review_db WHERE reviewcat !=''";
        
        
        
        
        $revsearch = $conn->prepare($sql);
        $revsearch->execute();
        $output='';
        
        if($revsearch->num_rows>0){
            while ($row = $revsearch->fetch(PDO::FETCH_ASSOC)) {
                $output .= '
                <div class="col-sm-6 col-lg-3 py-2">
    
<div class="card mb-4">
        
        
    
  <img class="card-img-top card-images " src="Images/Reviews/'. echo $row['reviewimage1'];.'" alt="'. echo $row['reviewtitle'];.'" >
  <div class="card-body">
    <h5 class="card-title">'. echo $row['reviewtitle'];.'</h5>
    <p class="card-text">'. echo $row['reviewsynop'];.'</p>
    

    
    <a href="Reviews/review-content.php?id='. echo $row['id'];.'&reviewtitle='. echo $row['reviewtitle'];.'" class="btn btn-primary my-4" >Read More</a>
    <div class="card-footer" style="padding: 1%;">
      <small class="text-muted">Submitted: '.
          $my_date = $row['reviewsub'];
            $date = DATE("d/m/Y",strtotime($my_date));
            echo $date;.'</small>
    </div>
  </div>
  
 
</div> 
</div>
                
                
                
                
                ';
                
                }
                
        
        else{
            $output = "<h3>No Reviews Found!</h3>";
        }

        
        
        
        
        
                
    
    echo $output;
    } 


    
?>

Answer 1

我实际上在服务器错误日志中发现了一些东西，我愚蠢地只在 firefox 上使用开发工具，但发现在 reviewaction.php 脚本中我留下了分号并且还漏掉了一个右括号.还有一些其他问题，我可以解决，只是无法弄清楚为什么它没有触发。

Bootstrap 卡片过滤器 PHP/AJAX 问题

Bootstrap Cards Filter PHP/AJAX Problems

php

ajax

filter

bootstrap-4

bootstrap-cards