如何通过onclick事件配合PHP更新filter变量实现页面内容动态刷新

现有代码核心问题 #

1. 前端fetch发送的是JSON格式请求体，PHP默认$_POST全局变量无法直接解析该格式内容，会导致$_POST['filter']判断失效
2. fetch请求仅完成了数据提交，没有对后端返回的新内容做页面替换处理，页面不会自动更新

修改后可运行代码 #

1. 前端JS代码

function filterMedia(filter) {
  const currentURL = window.location.href;
  // 可选：给当前选中的筛选按钮加激活状态
  document.querySelectorAll('.filter button').forEach(btn => btn.classList.remove('active'));
  event.target.classList.add('active');
  
  fetch(currentURL, {
    method: "POST",
    // 改用表单格式传参，PHP可直接通过$_POST读取，不需要额外解析JSON
    body: new URLSearchParams({filter: filter}),
    headers: { 
      "Content-Type": "application/x-www-form-urlencoded",
      "X-Requested-With": "XMLHttpRequest" // 标记为AJAX请求
    }
  })
  .then(res => res.text())
  .then(html => {
    // 替换页面中存放新闻列表的容器内容，选择器替换为你实际的列表容器类名/ID
    document.querySelector('.news-list').innerHTML = html;
  })
  .catch(err => console.log(err));
}

2. 后端PHP代码

<?php
// 判断是否为AJAX请求
$is_ajax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest';
$filter = "";

if (isset($_POST['filter'])) {
  switch($_POST['filter']) {
    case "media":
      $filter = "news-article";
      break;
    case "press":
      $filter = "press-release";
      break;
    case "video":
      $filter = "video";
      break;
  }
}

// WordPress文章查询逻辑，参数可根据你的需求调整
$args = [
  'post_type' => $filter ? $filter : 'post', // 无筛选时默认查询的文章类型可自行修改
  'posts_per_page' => 10,
  'post_status' => 'publish'
];
$query = new WP_Query($args);

// AJAX请求直接输出筛选结果后终止，避免返回整页HTML
if ($is_ajax) {
  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      // 输出结构和你页面原有列表结构保持一致即可
      echo '<div class="news-item">';
      echo '<h4><a href="'.get_permalink().'">'.get_the_title().'</a></h4>';
      echo '<p>'.get_the_excerpt().'</p>';
      echo '</div>';
    }
    wp_reset_postdata();
  } else {
    echo '<p class="no-data">暂无相关内容</p>';
  }
  exit;
}
?>

3. 页面HTML代码

<!-- 原有筛选按钮代码保留 -->
<div class="news-filter">
  <div class="filter">
    <button onclick="filterMedia('media')">In The Media</button>
  </div>
  <div class="filter">
    <button onclick="filterMedia('press')">Press Releases</button>
  </div>
  <div class="filter">
    <button onclick="filterMedia('video')">Videos</button>
  </div>
</div>

<!-- 新增新闻列表容器，和JS中选择器对应，首次加载直接输出默认内容 -->
<div class="news-list">
  <?php
  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      echo '<div class="news-item">';
      echo '<h4><a href="'.get_permalink().'">'.get_the_title().'</a></h4>';
      echo '<p>'.get_the_excerpt().'</p>';
      echo '</div>';
    }
    wp_reset_postdata();
  }
  ?>
</div>

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