PJAX

pjax实际上就是ajax加window.history.pushState的结合

例如一个数据表格的分页场景
如果是ajax,我们点击翻页,将page和limit传给后端,后端返回数据和总数,我们分页,看起来没什么问题
但是如果翻了几页以后,用户点击了刷新,那么就将回到第一页,因为当翻页的时候url是没有变化的

如果是pjax,则可以在发送ajax请求以后,利用window.history.pushState去更改url的地址,而且页面无刷新
当然我们也可以直接去更改url的地址,但是只能更改域名后的 例如 https://www.nikm.cn/a 我们不能让他变成baidu.com
只可以变成 https://www.nikm.cn/b/c 都可以

window.history.pushState(null ,'' ,'./a.php');

pjax完整demo

<?php 
$pjax = isset($_SERVER['HTTP_X_PJAX']) && $_SERVER['HTTP_X_PJAX'] == 'true';
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$i = 1 + ($page-1)*10;
$max = $i + 10;
 ?>
<?php if(!$pjax){ ?>
<!DOCTYPE html>
<html>
<head>
  <title>pjax</title>
    <meta charset="utf-8">
</head>
<body>
  <div id="content">
<?php  }  ?>

<?php while ($i < $max) { ?>
    <p><?php echo $i;?></p>
<?php $i++;} ?>

<?php if(!$pjax){ ?>
      </div>
  <div>
    <button type="button" id="button">下一页</button>
    <input type="checkbox" id="pjax">是否开启pjax
  </div>
</body>
<script src="https://cdn.nikm.cn/js/jquery.js"></script>
<script src="https://cdn.nikm.cn/js/jquery.pjax.js"></script>
<script type="text/javascript">
var next_page = <?php echo $page + 1; ?>;
$(function(){
    $('#button').click(function(){
        var url = './test4.php?page=' + next_page;
        var pjax = $("#pjax").is(':checked');
        if(pjax){
            $.pjax({
                url: url,
                container: '#content'
            });
            next_page++;
        }else{
            window.location.href = url;
        }
    });
});
</script>
</html>
<?php } ?>
Last modification:December 24th, 2019 at 02:56 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

简爱博客