基于PHP/Ajax实现URL可变更的分页导航，兼容浏览器后退按钮

需求：构建Ajax/jQuery分页导航，点击页码时同步更新URL，保证浏览器后退按钮正常工作。现有教程代码无法实现该功能，不清楚需修改前端还是后端，附上代码：

原index.php #

<html>  
      <head>  
           <title>Webslesson Tutorial | Make Pagination using Jquery, PHP, Ajax and MySQL</title>  

           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           
      </head>  
      <body>  
           <br /><br />  
           <div class="container">  
                <h3 align="center">Make Pagination using Jquery, PHP, Ajax and MySQL</h3><br />  
                <div class="table-responsive" id="pagination_data">  
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      load_data();  
      function load_data(page)  
      {  
           $.ajax({  
                url:"pagina.php",  
                method:"POST",  
                data:{page:page},  
                success:function(data){  
                     $('#pagination_data').html(data); 
        history.pushState({ foo: 'bar' }, '', '/bank');     // I tried this line but it don't work           
                }  
           })  
      }  
      $(document).on('click', '.pagination_link', function(){  
           var page = $(this).attr("id");  
           load_data(page);  
      });  
 });  
 </script>  

原pagina.php #

<?PHP 

$connect = mysqli_connect("hidden", "hidden", "hidden","publiek2") or die("Connection failed: " . mysqli_connect_error());
$record_per_page = 50;  
 $page = '';  
 $output = '';  
 

 if(isset($_POST["page"]))  
 {  
      $page = $_POST["page"];  
 }  
 else  
 {  
      $page = 1;  
 }  
 $start_from = ($page - 1)*$record_per_page;  
 $query = "SELECT * FROM voertuigen WHERE merk='Chevrolet' AND voorpagina='1' ORDER BY model ASC LIMIT $start_from, $record_per_page";  
 $result = mysqli_query($connect, $query);  
 $output .= "  
      <table class='table table-bordered'>  
           <tr>  
                <th width='50%'>Name</th>  
                <th width='50%'>Phone</th>  
           </tr>  
 ";  
 while($row = mysqli_fetch_array($result))  
 {  
      $output .= '  
           <tr>  
                <td>'.$row["merk"].'</td>  
                <td>'.$row["model"].'</td>  
           </tr>  
      ';  
 }  
 $output .= '</table><br /><div align="center">';  
 $page_query = "SELECT * FROM voertuigen WHERE merk='Chevrolet'  AND voorpagina='1' ORDER BY model ASC";  
 $page_result = mysqli_query($connect, $page_query);  
 $total_records = mysqli_num_rows($page_result);  
 $total_pages = ceil($total_records/$record_per_page);  

 for($i=1; $i<=$total_pages; $i++)  
 {  
  
  $output .= "<span class='pagination_link' style='cursor:pointer; padding:6px; border:1px solid #ccc;' id='".$i."'>".$i."</span>";  
 }  
 $output .= '</div><br /><br />';  
 echo $output;  
 ?>  

解决方案：同时修改前端和后端 #

要实现URL同步与后退功能，需要前端处理URL状态变更，后端兼容GET参数访问：

1. 前端修改（index.php） #

• 解析URL中的page参数，初始化时加载对应分页
• 使用history.pushState更新URL（替换写死的固定路径，改为带page参数的动态路径）
• 监听popstate事件，处理浏览器后退/前进时重新加载对应分页

修改后的前端代码：

<html>  
<head>  
    <title>Webslesson Tutorial | Make Pagination using Jquery, PHP, Ajax and MySQL</title>  

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
</head>  
<body>  
    <br /><br />  
    <div class="container">  
        <h3 align="center">Make Pagination using Jquery, PHP, Ajax and MySQL</h3><br />  
        <div class="table-responsive" id="pagination_data">  
        </div>  
    </div>  
</body>  
</html>  
<script>  
$(document).ready(function(){  
    // 从URL获取当前page参数，默认加载第1页
    function getCurrentPage() {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get('page') || 1;
    }

    // 初始化加载对应分页
    load_data(getCurrentPage());  

    function load_data(page) {  
        $.ajax({  
            url:"pagina.php",  
            method:"POST",  
            data:{page:page},  
            success:function(data){  
                $('#pagination_data').html(data); 
                // 更新URL，添加page参数
                const newUrl = `${window.location.pathname}?page=${page}`;
                history.pushState({ page: page }, '', newUrl);         
            }  
        })  
    }  

    // 点击页码加载对应分页
    $(document).on('click', '.pagination_link', function(){  
        var page = $(this).attr("id");  
        load_data(page);  
    });  

    // 监听浏览器后退/前进事件
    window.addEventListener('popstate', function(e) {
        const page = e.state?.page || 1;
        load_data(page);
    });
});  
</script>  

2. 后端修改（pagina.php） #

• 同时支持POST和GET方式获取page参数，确保直接访问带page参数的URL能返回正确内容

修改后的后端代码：

<?PHP 

$connect = mysqli_connect("hidden", "hidden", "hidden","publiek2") or die("Connection failed: " . mysqli_connect_error());
$record_per_page = 50;  
$page = '';  
$output = '';  

// 兼容POST和GET获取page参数
if(isset($_POST["page"])) {  
    $page = $_POST["page"];  
} elseif(isset($_GET["page"])) {
    $page = $_GET["page"];
} else {  
    $page = 1;  
}  
$start_from = ($page - 1)*$record_per_page;  
$query = "SELECT * FROM voertuigen WHERE merk='Chevrolet' AND voorpagina='1' ORDER BY model ASC LIMIT $start_from, $record_per_page";  
$result = mysqli_query($connect, $query);  
$output .= "  
    <table class='table table-bordered'>  
        <tr>  
            <th width='50%'>Name</th>  
            <th width='50%'>Phone</th>  
        </tr>  
";  
while($row = mysqli_fetch_array($result)) {  
    $output .= '  
        <tr>  
            <td>'.$row["merk"].'</td>  
            <td>'.$row["model"].'</td>  
        </tr>  
    ';  
}  
$output .= '</table><br /><div align="center">';  
$page_query = "SELECT * FROM voertuigen WHERE merk='Chevrolet'  AND voorpagina='1' ORDER BY model ASC";  
$page_result = mysqli_query($connect, $page_query);  
$total_records = mysqli_num_rows($page_result);  
$total_pages = ceil($total_records/$record_per_page);  

for($i=1; $i<=$total_pages; $i++) {  
    $output .= "<span class='pagination_link' style='cursor:pointer; padding:6px; border:1px solid #ccc;' id='".$i."'>".$i."</span>";  
}  
$output .= '</div><br /><br />';  
echo $output;  
?>  

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