如何用下拉菜单实现内容过滤？PHP与SQL技术问询

DevOps 小满

2026-8-12

标签过滤博客内容实现指导

我们正在开发一个带标签的博客网站，希望通过标签下拉菜单过滤首页的发布内容。现有导航下拉菜单代码及文章展示的PHP+SQL代码如下，请求指导实现过滤逻辑：

现有导航菜单代码

<nav> 
  <ul>
    <li><a href="Home_loggedin.php">Home</a></li>

    <li><a href="">Tags<i class="material-icons">arrow_drop_down</i></a>
      <ul class = "dropdown">
      <li><a href="Home_loggedin.php">All</button></a></li>
      <li><a href="Home_loggedin.php">Homemade</button></a></li>
      <li><a href="Home_loggedin.php">Pro</button></a></li>
      <li><a href="Home_loggedin.php">Resto</button></a></li>
      </ul>
    </li> 
</nav>

现有文章展示代码

<!-- Posting -->
<div>
        <?php 
          
          $query = "select * from posts order by date limit 8";

          $result = mysqli_query($con,$query,$tagHomemade);
        ?>
        
        <?php if(mysqli_num_rows($result) > 0):?>
          
          <div>
            <?php while ($row = mysqli_fetch_assoc($result)):?>
              
              <?php 
                $user_id = $row['user_id'];
                $query = "select username, image from users where id ='$user_id' limit 1";
                $res = mysqli_query($con,$query);

                $user_row = mysqli_fetch_assoc($res);
              ?>

              <div class="card">
                <div style ="display: flex;">
                  <div style ="flex:1", >
                    <div class="profile"><img class ="icon" src="<?=$user_row['image']?>"></div>
                  </div>

                  <div style ="flex:2;" >
                    <h5>Posted by: <?php echo $_SESSION['logged']['username']?>,
                      <?php echo date("jS M, Y",strtotime($row['date']))?>
                    </h5>
                    <h3><?php echo $row['tag']?>: <?php echo $row['title']?></h3>
                  </div>  
                </div>


                <div>
                  <?php if (file_exists($row['image']))?>

                  <div class="img" style="text-align:center;">
                      <img class="postPic" src="<?=$row['image']?>">
                  </div>
                </div>

                <div>
                  <?php if (!empty ($POST['post']));?>
                  <?php echo $row['post']?>
                </div>
                
            </div>
            <?php endwhile;?>
          </div>
      </div>
      <?php endif;?>
</div>

实现步骤

1. 修改导航菜单链接，传递标签参数

给下拉菜单的每个链接添加tag参数，让点击时能把选中的标签传给后端：

<nav> 
  <ul>
    <li><a href="Home_loggedin.php">Home</a></li>

    <li><a href="">Tags<i class="material-icons">arrow_drop_down</i></a>
      <ul class = "dropdown">
      <li><a href="Home_loggedin.php?tag=all">All</a></li>
      <li><a href="Home_loggedin.php?tag=Homemade">Homemade</a></li>
      <li><a href="Home_loggedin.php?tag=Pro">Pro</a></li>
      <li><a href="Home_loggedin.php?tag=Resto">Resto</a></li>
      </ul>
    </li> 
</nav>

注：已修正原代码中<a>标签内错误嵌套的</button>标签

2. 后端接收参数，动态生成过滤查询

在文章展示的PHP代码中，获取URL的tag参数，根据参数动态调整SQL查询：

<!-- Posting -->
<div>
        <?php 
          // 获取URL中的tag参数，默认显示全部内容
          $selected_tag = isset($_GET['tag']) ? $_GET['tag'] : 'all';
          
          // 初始化查询语句
          $query = "SELECT * FROM posts ";
          
          // 非全部标签时添加过滤条件
          if ($selected_tag !== 'all') {
            $query .= "WHERE tag = ? ";
          }
          
          $query .= "ORDER BY date LIMIT 8";
          
          // 执行查询，用预处理语句防止SQL注入
          if ($selected_tag !== 'all') {
            $stmt = mysqli_prepare($con, $query);
            mysqli_stmt_bind_param($stmt, "s", $selected_tag);
            mysqli_stmt_execute($stmt);
            $result = mysqli_stmt_get_result($stmt);
          } else {
            $result = mysqli_query($con, $query);
          }
        ?>
        
        <?php if(mysqli_num_rows($result) > 0):?>
          <div>
            <?php while ($row = mysqli_fetch_assoc($result)):?>
              
              <?php 
                $user_id = $row['user_id'];
                // 同样用预处理语句查询作者信息，避免注入
                $user_query = "SELECT username, image FROM users WHERE id = ? LIMIT 1";
                $user_stmt = mysqli_prepare($con, $user_query);
                mysqli_stmt_bind_param($user_stmt, "i", $user_id);
                mysqli_stmt_execute($user_stmt);
                $res = mysqli_stmt_get_result($user_stmt);
                $user_row = mysqli_fetch_assoc($res);
              ?>

              <div class="card">
                <div style ="display: flex;">
                  <div style ="flex:1">
                    <div class="profile"><img class ="icon" src="<?=$user_row['image']?>"></div>
                  </div>

                  <div style ="flex:2">
                    <h5>Posted by: <?php echo $user_row['username']?>,
                      <?php echo date("jS M, Y",strtotime($row['date']))?>
                    </h5>
                    <h3><?php echo $row['tag']?>: <?php echo $row['title']?></h3>
                  </div>  
                </div>


                <div>
                  <?php if (file_exists($row['image'])): ?>
                  <div class="img" style="text-align:center;">
                      <img class="postPic" src="<?=$row['image']?>">
                  </div>
                  <?php endif; ?>
                </div>

                <div>
                  <?php echo !empty($row['post']) ? $row['post'] : ''; ?>
                </div>
                
            </div>
            <?php endwhile;?>
          </div>
      </div>
      <?php endif;?>
</div>

3. 代码优化说明

修复原代码语法错误：补全缺失的<?php endif;?>、修正$POST为$row['post']、闭合<h3>标签等
采用预处理语句避免SQL注入风险
修正作者显示逻辑：原代码错误显示当前登录用户，改为展示文章实际作者的用户名
完善图片显示的条件判断语法

内容的提问来源于stack exchange，提问作者JM Robles