AJAX XMLHttpRequest显示文件不与分页工作

Question

我使用这个脚本来加载我的serverlist 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 xPawSourceQuerySourceQuery;
$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加载第一个页面。加载的页面具有链接到下一页的分页。这些链接只是常规链接，您必须将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...";
};
}
}

，对于分页链接:

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