WordPress中AJAX分页测验排行榜问题求助（基于jQuery、PHP、MySQL）

看起来你的分页功能有几个关键问题，我来一步步帮你解决：

1. 修复前端循环越界错误 #

你当前的PHP循环条件$i <= count($display_result)会导致数组越界（因为数组索引从0开始，最后一个元素的索引是count($display_result)-1），直接会引发页面报错，破坏后续JS执行。

修复代码：

<?php for ($i = 0; $i < count($display_result); $i++) { ?>
  <div class="card-text-page"> <!-- 移除重复的id="card-text-page1"，避免DOM冲突 -->
    <div class='card-text border'>
      <div class='leader-detail'>
        <div class='leader-username'>
          <?= $display_result[$i]['display_name']; ?>
        </div>
        <div class='leader-score'>
          <p><?= $display_result[$i]['score'] ?>%</p>
        </div>
      </div>
      <div class='leader-medal'>
        <?= $display_result[$i]['medal'] ?>
      </div>
    </div>
  </div>
<?php } ?>

2. 重构WordPress AJAX处理逻辑 #

WordPress不建议直接请求自定义PHP文件，而是要用官方的admin-ajax.php接口，同时要注册AJAX处理动作，避免安全问题。

第一步：在主题的functions.php中添加AJAX处理函数 #

// 处理登录用户的AJAX请求
add_action('wp_ajax_get_leaderboard_page', 'get_leaderboard_page_callback');
// 处理未登录用户的AJAX请求（如果需要允许游客查看排行榜）
add_action('wp_ajax_nopriv_get_leaderboard_page', 'get_leaderboard_page_callback');

function get_leaderboard_page_callback() {
  global $wpdb;
  
  // 验证分页参数
  $page = isset($_POST['row_no']) ? intval($_POST['row_no']) : 1;
  $limit = 4;
  $start = ($page - 1) * $limit;
  
  // 安全查询数据库（用$wpdb->prepare防止SQL注入）
  $get_result = $wpdb->get_results(
    $wpdb->prepare(
      "SELECT * FROM wp_quiz ORDER BY score DESC LIMIT %d, %d",
      $start,
      $limit
    )
  );
  
  $display_result = json_decode(json_encode($get_result), true);
  
  // 渲染分页内容的HTML
  ob_start();
  foreach ($display_result as $item) { ?>
    <div class="card-text-page">
      <div class='card-text border'>
        <div class='leader-detail'>
          <div class='leader-username'>
            <?= esc_html($item['display_name']); ?> <!-- 用esc_html防止XSS -->
          </div>
          <div class='leader-score'>
            <p><?= esc_html($item['score']) ?>%</p>
          </div>
        </div>
        <div class='leader-medal'>
          <?= esc_html($item['medal']) ?>
        </div>
      </div>
    </div>
  <?php }
  $html = ob_get_clean();
  
  echo $html;
  wp_die(); // 必须用wp_die()结束AJAX请求，否则会返回多余内容
}

第二步：修复前端AJAX代码 #

把原来的JS改成这样，使用WordPress官方的AJAX接口：

<script>
jQuery(document).ready(function($) {
  function get_data(no) {
    $.ajax({
      type: 'post',
      url: '<?php echo admin_url("admin-ajax.php"); ?>', // 用WordPress提供的AJAX URL
      data: { 
        action: 'get_leaderboard_page', // 对应functions.php中注册的动作名
        row_no: no 
      },
      success: function(response) {
        // 替换整个排行榜条目容器，而不是单个重复ID的元素
        $("#leader_board .card-text-page").remove();
        $("#leader_board").prepend(response);
      },
      error: function(xhr, status, error) {
        console.log("AJAX请求失败：" + error); // 调试用，方便排查问题
      }
    });
  }
});
</script>

3. 修复分页按钮容器的结构 #

把原来的分页按钮放在一个单独的容器里，避免AJAX替换时被清空：

<div id="leader_board">
  <!-- 这里放排行榜条目 -->
  <?php foreach ($display_result as $item) { ?>
    <!-- 上面修复后的条目HTML -->
  <?php } ?>
  
  <!-- 分页按钮单独放在一个容器里，不会被AJAX替换 -->
  <div id="pagination_buttons">
    <?php 
    $totalPages = ceil($total_result / $limit);
    for ($i = 1; $i <= $totalPages; $i++) { 
      echo "<input type='button' value='" . $i . "' onclick='get_data(" . $i . ")'>"; 
    } 
    ?>
  </div>
</div>

4. 额外的安全优化 #

• 所有输出到页面的用户数据都要用esc_html()转义，防止XSS攻击（上面的代码已经添加了）
• 数据库查询必须用$wpdb->prepare()，避免SQL注入风险
• 如果排行榜只允许登录用户查看，可以移除wp_ajax_nopriv_开头的动作

按照上面的步骤修改后，你的AJAX分页应该就能正常工作了。如果还有问题，可以打开浏览器的开发者工具（F12）查看控制台的错误信息，或者检查AJAX请求的返回内容。

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