如何实现PHP表单提交的排序结果在当前页展示，修复跳转样式丢失与SESSION报错

开发背景 #

• 处于网页设计与编程学习阶段，技术储备有限，正在搭建简易活动站点
• 计划实现「按条件搜索排序」功能，对MySQL数据库存储的体育类活动，支持按活动名称、活动日期维度排序展示

现有实现代码 #

主页面排序表单 #

当前页面设置内置两个提交按钮的表单，分别对应按名称、按日期的排序触发逻辑，代码如下：

<div>
        <form action="resources/files/sport_events.php" method="post">
          <lable>Search By: </lable>
          <button type="submit" name="name" value="name">Name</button>
          <button type="submit" name="date" value="date" >Date</button>
        </form>
    </div>

表单下方通过PHP的include()方法引入关联的sport_events.php文件渲染活动列表。

活动渲染逻辑文件 sport_events.php #

文件内部通过if/elseif/else分支语句，接收表单通过$_POST传递的数据，根据提交按钮标识匹配对应SQL查询逻辑，将查询语句传入自定义函数执行，最终通过foreach循环遍历数据库返回的结果集，渲染生成页面上的活动展示模块，完整代码如下：

<?php
//SQL Queries
if(isset($_POST['name'])){
  $queryByName = 'SELECT * FROM events WHERE event_category = "Sports" ORDER BY event_name;';
  $result = $queryByName;
} elseif (isset($_POST['date'])) {
  $queryByDate = 'SELECT * FROM events WHERE event_category = "Sports" ORDER BY event_date;';
  $result = $queryByDate;
} else {
  $defaultQuery = 'SELECT * FROM events WHERE event_category = "Sports";';
  $result = $defaultQuery;
}

function executeQuery($query){
  include('dbh.home.php');
  $data = $conn->query($query);
  return $data;
}
//Table of Events code.
foreach(executeQuery($result) as $row) {
  // Changes the date format before it passes through.
  $date_to_sort = strtotime($row['event_date']);
  $sorted_date = date("F j, Y",$date_to_sort);
  ?>
  <div class="eventsTable">
    <div class="eventImage">
      <img src="<?php echo $row['event_image']; ?>" alt="<?php echo $row['event_name'] ?> Image" />
    </div>
  <div class="eventsData">
      <ul class="sectionOne">
        <li class="event_title"><?php echo $row['event_name']; ?></li>
        <li class="accountUser">
          <img class="thumbsDown" alt="Thumbs Down" src="resources/images/system/thumbs-down_left.png" height="20" width="20" onclick="eventDOWN(<?php echo $row['event_id'] ?>)" />
          <img class="thumbsUp" alt="Thumbs Up" src="resources/images/system/thumbs-up_left.png" height="20" width="20" onclick="eventUP(<?php echo $row['event_id'] ?>)" />
          <button id="book_<?php echo $row['event_id']?>" onclick="location.href='booking.php'">Book In</button>
        </li>
        <li><?php echo $row['event_description']; ?></li>
        <li><span class="label">Date: </span><?php echo $sorted_date; ?></td></li>
        <li class="more" id="more_<?php echo $row['event_id']?>"><button type="button" onclick="revealMoreLess(<?php echo $row['event_id']?>)">see more...</button></li>
      </ul>
      <!--Hidden from view untill click "see more..."-->
      <ul class="sectionTwo" id="sectionTwo_<?php echo $row['event_id']?>">
        <li><span class="label">Location: </span><?php echo $row['event_venue']; ?></li>
        <li><span class="label">Organiser: </span><?php echo $row['event_organiser']; ?></li>
        <li><span class="label">Contact: </span><a href="<?php echo $row['contact_info']; ?>"><?php echo $row['contact_info']; ?></a></li>
        <li><button type="button" onClick="revealMoreLess(<?php echo $row['event_id']?>)">see less...</button> </li>
      </ul>
  </div>
</div>
  <?php
    }


// Checks if the current User is logged in to display the "accountUser" only elements or not.
    if($_SESSION['user_id'] === "guest"){ ?>
      <script type="text/JavaScript">
        bookinList = document.getElementsByClassName("accountUser");
        document.getElementsByClassName('accountUser');
        if(bookinList){
          for(var i=0; i<bookinList.length; i++){
            bookinList[i].style.visibility = "hidden";
          }
        }
      </script>
      <?php
    } else {
      ?>
      <script type="text/JavaScript">
        bookinList = document.getElementsByClassName("accountUser");
        document.getElementsByClassName('accountUser');
        if(bookinList){
          for(var i=0; i<bookinList.length; i++){
            bookinList[i].style.visibility = "visible";
          }
        }
      </script>
      <?php
    }
?>

当前存在的核心问题 #

1. 页面跳转异常：体育活动页面首次加载时，所有内容均可按照设计正常展示；点击表单的任一排序提交按钮后，虽然数据排序逻辑执行正确，页面却会跳转至独立的sport_events.php路径（://localhost/SOMEFOLDER/resources/files/sport_events.php），丢失原有页面的样式与图片资源，呈现无样式的纯文本效果。
2. SESSION相关报错：跳转后的页面会出现两处报错：
   • Notice: Undefined variable: _SESSION in C:\xampp\htdocs\SOMEFOLDER\resources\files\sport_events.php on line 55
   • Notice: Trying to access array offset on value of type null in C:\xampp\htdocs\SOMEFOLDER\resources\files\sport_events.php on line 55
     这类报错是在新增分支判断逻辑与自定义查询函数后才出现的。

预期实现需求 #

无论是否触发表单的排序提交操作，活动展示模块都可在当前页面正常渲染：

• 未触发排序时，展示默认的体育活动列表
• 触发排序时，按照对应规则排序后在原页面展示，不发生独立跳转、不丢失原有样式资源、不出现SESSION相关报错

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