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 } ?>版权属于：本文是原创文章，版权归 吾梦小站 所有。
本文链接：https://nikm.cn/archives/37.html
本站所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由地转载和修改，但请务必注明文章来源并且不可用于商业目的。
