当前位置:LaySNS首页 > 技术交流

网站添加PJAX局部刷新功能

楼主:神话菜鸟 时间:2020-04-27 01:03:29 点击:1280 回复:0

可能有人对PJAX局部刷新不清楚,简单说就是点击下个页面它能不刷新整个页面代码,只刷新部分打开网页,打开的快慢取决于你的服务器。

而一般需要用到的PJAX也就音乐播放器,需要不刷新整个页面之类的功能,如果不懂也没关系,你也不需要。。。

缺点就是刷新的部分如果有js文件是不执行的,需要明码才行。

效果:http://54sh.net/

我只在登录后开启PJAX,需要看的自己注册看看,打开底部播放器跟未登录的区别

教程

先添加全局必要js文件:

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery.pjax/1.9.5/jquery.pjax.min.js"></script>

然后下面加上:

<script type="text/javascript" language="javascript">
$(function() {
$(document).pjax('a[target!=_blank]', '#content', {fragment:'#content', timeout:6000}); //这是a标签的pjax。#content 表示执行pjax后会发生变化的id,改成你主题的内容主体id或class。timeout是pjax响应时间限制,如果在设定时间内未响应就执行页面转跳,可自由设置。
$(document).on('submit', 'form', function (event) {$.pjax.submit(event, '#content', {fragment:'#content', timeout:6000});}); //这是提交表单的pjax。form表示所有的提交表单都会执行pjax,比如搜索和提交评论,可自行修改改成你想要执行pjax的form id或class。#content 同上改成你主题的内容主体id或class。
    $(document).on('pjax:send', function() {
          $(".pjax_loading,.pjax_loading1").css("display", "block");//参考的loading动画代码
          //执行pjax开始,在这里添加要重载的代码,可自行添加loading动画代码。例如你已调用了NProgress,在这里添加 NProgress.start();
          });
    $(document).on('pjax:complete', function() {
          $(".pjax_loading,.pjax_loading1").css("display", "none");//参考的loading动画代码
          //执行pjax结束,在这里添加要重载的代码,可自行添加loading动画结束或隐藏代码。例如NProgress的结束代码 NProgress.done();
          });
});
</script>
<div class="pjax_loading"></div>
<div class="pjax_loading1"></div>

参考css代码(可自己去百度搜索)

.pjax_loading {position: fixed;top: 45%;left: 45%;display: none;z-index: 999999;width: 124px;height: 124px;background: url('images/pjax_loading.gif') 50% 50% no-repeat;}
.pjax_loading1 {position: fixed;top: 0;left: 0;z-index: 999999;display: none;width: 100%;height: 100%;background-color: #4c4c4c;opacity: .2}

1.前面引用的jquery.pjax.min.js是国外大神写的jquery开源的pjax通用封装插件。

2.网上很多以上封装的教程都没有加上form事件,所以这个教程主要是解决博客的搜索和评论问题。

注意#content是要刷新的内容框架,根据自己需求改。

原教程:https://pjax.cn/pjax_form.html

不懂也不要问我,这个教程地址是小高给我的。

0.106950s