AI摘要
pjax是一种利用ajax技术更新页面内容的技术，无需刷新浏览器即可获取并更新文档，同时避免重复加载js和css文件，并通过pushState功能更新URL和实现历史记录回溯。使用pjax能提升网站速度和用户体验，因为无需重新加载整个页面。实现方法包括引入jQuery和pjax库，并在文档头部和底部添加相关代码，设置局部刷新内容和加载动画。
pjax是什么？
简单点描述, 就是利用 ajax 技术去服务器获取文档, 在不刷新浏览器页面的情况下, 更新当前页面, 并且能保证页面的 js 和 css 等文件不会被重复加载, 然后利用浏览器提供的 pushState 功能, 对 URL 进行更新, 并能保证用户通过点击 back 按钮回溯到历史页面.
pjax可以带来更好的体验 加载新的页面无需重新去加载css js 让网站速度更快 ，因为不需要整个页面刷新,很大程度上提高了页面的加载速度.
这个使用的方法是非常简单的
首先调用jQuery 跟 pjax 包装代码
别的也不整了 直接上代码
在网站的 head 双标签内加入以下资源引入代码：
<script type="text/javascript" src="https://cdn.gqink.cn/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.gqink.cn/jQuery/jquery.pjax.min.js"></script>
下一步，就是在 `` 标签前，添加下面代码
也就是网站的footer底部
<script type="text/javascript">
//这里的#id代码局部刷新的内容
$(document).pjax('a[target!=_blank]', '#id', {fragment: '#html',timeout: 8000});
$(document).on('pjax:send', function() {
//$('#loading').show(); // 将#loading的内容显示 加载动画
});
$(document).on('pjax:complete', function() {
//$('#loading').hide(); // 将#loading的内容隐藏 加载动画
//页面刷新后有些函数没有调用在这里可以写上你的函数让他重新加载
});
</script>
加载动画这里就不整了 自己研究研究 加个表情写个动画就行
返回首页
最后更新: 2025-12-23
