<?php
echo '<h1>2</h1>'
?>
<?php
echo '<h1>1</h1>'
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery-Pjax</title>
<link href="https://cdn.bootcss.com/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<a data-pjax href="./api.php">d1.html</a>   
<a data-pjax href="./api2.php">d2.html</a>
<div id="pjax-container">
容器
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.min.pjax.js"></script>
<script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>
<script>
$(document).on('click', 'a', function (evet) {
$.pjax({
url: $(this).attr('href'),
container: '#pjax-container',
fragment: 'h1'
})
return false
})
// pjax链接点击后显示加载动画；
$(document).on('pjax:send', function () {
NProgress.start();
});
// pjax链接加载完成后隐藏加载动画；
$(document).on('pjax:complete', function () {
NProgress.done();
});
</script>
</body>
</html>
注： 所有pjax请求来的页面保持页面布局都相同。配置
fragment获取内容插入容器中，这样做是因为对于不支持pushState的浏览器，用普通的跳转，保证页面完整。
网友评论