AJAX 显示文件的 XMLHttpRequest 不适用于分页

Question

我正在使用此脚本加载我的服务器列表 php 文件，但它不适用于分页，它只是刷新页面并从第一页加载相同的结果。我不是要别人为我写出修复程序，但如果有人能帮助我指出正确的方向，我将不胜感激

<pre>
  <script type="text/javascript">
    function refreshData(){
      var display = document.getElementById("servers");
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", "query/Examples/serverlist.php");
      xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xmlhttp.send();
      xmlhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
          display.innerHTML = this.responseText;
        } else {
          display.innerHTML = "Loading...";
        };
      }
    }
  </script>
            
  <div id="servers" /><img src="includes/IMG/loading.gif"/>
</div>
</pre>

这是我的 serverlist.php 文件

<pre>
<?php
require_once('../../includes/connect.php');
$sql= "SELECT * FROM servers ORDER BY votes DESC";
$result = $db->query($sql); 
$row = $result->fetch(PDO::FETCH_ASSOC);

    require __DIR__ . '/../SourceQuery/bootstrap.php';

    use xPaw\SourceQuery\SourceQuery;
    $perPage = 5;

    // Calculate Total pages
    $stmt = $db->query('SELECT * FROM servers');
    $total_results = $stmt->fetchColumn();
    $total_pages = ceil($total_results / $perPage);

    // Current page
    $page = isset($_GET['page']) ? $_GET['page'] : 1;
    $starting_limit = ($page - 1) * $perPage;
    if($page < 1) { 
    header ("location: index.php");
    }

    // Query to fetch servers
    $q = "SELECT * FROM servers ORDER BY votes DESC LIMIT :start, :per_page";
    $query = $db->prepare($q);
    $query->bindParam(':start', $starting_limit, PDO::PARAM_INT);
    $query->bindParam(':per_page',$perPage, PDO::PARAM_INT);
    $query->execute();

    // Fetch all servers for current page
        $result = $query->fetchAll(PDO::FETCH_ASSOC);;
    ?>
    <div class="table-responsive">
  <table class="table table-striped table-hover table-borderless ">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Server</th>
        <th scope="col">IP</th>
        <th scope="col">Players</th>
        <th scope="col">Type</th>
        <th scope="col">Votes</th>
      </tr>
    </thead>
    <tbody>
    
    <?php
    $i = $page * $perPage -4;
foreach ($result as $row) {
$focus = $row['focus'];
$type = $row['type'];
    
    $Timer = microtime( true );
    
    $Query = new SourceQuery( );
    
    $Info    = [];
    $Players = [];
    $Exception = null;
    
    try
    {
        $Query->Connect( $row['ip'], $row['qport'], 3, SourceQuery::SOURCE );
        //$Query->SetUseOldGetChallengeMethod( true ); // Use this when players/rules retrieval fails on games like Starbound
        
        $Info    = $Query->GetInfo( );
        $Players = $Query->GetPlayers( );
    }
    catch( Exception $e )
    {
        $Exception = $e;
    }
    finally
    {
        $Query->Disconnect( );
    }
    
    $Timer = number_format( microtime( true ) - $Timer, 4, '.', '' );
 
?>

<?php if( !empty( $Info ) ): ?>

      <tr>
      <?php if($i == 1) { ?>
        <tr class="table-warning">
      <?php }else{ ?>
       <tr>
      <?php } ?>
      <th scope="row">
        <?php echo $i; ?></th>
        <td><?php echo $Info['HostName'];  ?></td>
        <td><?php echo $row['ip']; ?>:<?php echo $row['port']; ?></td>
        <td><?php echo $Info['Players']; ?>/<?php echo $Info['MaxPlayers']; ?></td>
        <td>
<?php 
switch ($focus) {
  case "1":
    echo "Crafting";
    break;
  case "2":
    echo "Roleplay";
    break;
  case "3":
    echo "PVP";
    break;
  case "4":
    echo "PVE";
    break;
}
?>
|<?php 
switch ($type) {
  case "0":
    echo "Vanilla";
    break;
  case "1":
    echo "Modded";
    break;
}
?>
</td>
        <td>
        
         <a href="vote.php?id=<?php echo $row['id']; ?>">
<div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-outline-success"><?php echo $row['votes']; ?></button>
 <button type="button" class="btn btn-success">Vote</button>
</div>
</a>
        
        </td>
      </tr>
        

<?php else: ?>
      <tr class="table-danger">
        <th scope="row"><?php echo $i; ?></th>
        <td><?php echo $row['servername'];  ?></td>
        <td><?php echo $row['ip']; ?>:<?php echo $row['port']; ?></td>
        <td><?php echo $row['maxplayers']; ?></td>
        <td>
        <?php 
switch ($focus) {
  case "1":
    echo "Crafting";
    break;
  case "2":
    echo "Roleplay";
    break;
  case "3":
    echo "PVP";
    break;
  case "4":
    echo "PVE";
    break;
}
?>
|<?php 
switch ($type) {
  case "0":
    echo "Vanilla";
    break;
  case "1":
    echo "Modded";
    break;
}
?>
        </td>
        <td class="table-danger">
        
         <a href="vote.php?id=<?php echo $row['id']; ?>">
<div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-outline-success"><?php echo $row['votes']; ?></button>
 <button type="button" class="btn btn-success">Vote</button>
</div>
</a>
        
        </td>
      </tr>

                    
<?php endif; ?>
                
<?php $i++; } ?>    
    </tbody>

  </table>
  </div>
 <?php for ($page = 1; $page <= $total_pages ; $page++):?>
        <a href='<?php echo "?page=$page"; ?>' class="links">
            <?php  echo $page; ?>
        </a>
    <?php endfor; ?>   
</div>  
</pre>

Answer 1

您仅通过 AJAX 加载第一页。加载页面的分页 links 到下一页。这些 link 只是常规 link，您必须将 AJAX 函数绑定到它们。

function refreshData(page) {
    page = page || 1; // default page
    var display = document.getElementById("servers");
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", "query/Examples/serverlist.php?page=" + page);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlhttp.send();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            display.innerHTML = this.responseText;
        } else {
            display.innerHTML = "Loading...";
        };
    }
}

对于分页 links:

<?php for ($page = 1; $page <= $total_pages; $page++):?>
    <a href='javascript:refreshData(<?php echo $page; ?>);' class="links">
        <?php  echo $page; ?>
    </a>
<?php endfor; ?>

AJAX 显示文件的 XMLHttpRequest 不适用于分页

AJAX XMLHttpRequest to display a file doesnt work with pagination

javascript

php

ajax

pagination