如何将Pjax整合进网站,实现全站无刷新加载?

pjax工作原理

用大白话来说,就是ajax的升级版--可以动态记录历史记录的ajax技术。我们之前用ajax来做无刷新分页,一个最大的不足之处就是无法通过uri来标识这个资源以及历史记录倒退问题,通过利用html5 pushState的api,我们可以轻松达到发送ajax请求的同时,动态的记录状态,这就是pjax!

准备工作

pjax是什么东西,我们懂了之后,就要开始用它了!但是我们要写一套复杂的js去pushState么?答案是不需要的,已经有人封装好了JqueryPjax插件,我们只需用人家写好的插件即可。由于这款插件依赖于jquery,又依赖jq去操作pushState,所以必须下载1.7版本以上的JQ哦!

<script type='text/javascript' src='jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='pjax.js'></script>

开始使用

模板中:

$(document).pjax('a', '#pjax-container');
$(document).on("pjax:timeout", function(event) {
    // 阻止超时导致链接跳转事件发生
    event.preventDefault();
});

本页面所有a链接默认用pjax请求数据,请求的数据放入id为pjax-container中。ps:如果前台模板有模板继承,直接写入父类即可。

后台程序、这里用php程序示范:

首先判断是pjax请求还是正常的请求,可以封装成一个方法(方法很多~我只做个示范):

protected function is_pjax(){
  $input = $_POST;
  if(isset($input['_pjax']) && !empty($input['_pjax'])){
      return true;//是pjax请求
  }else{
      return false;//不是pjax请求
  }
}

然后控制器根据是否pjax返回不同的数据:

if($this->is_pjax()){
    return view('index_pjax');//返回pjax的模板
}
return view('index');//返回正常的模板

这里用laravel的方法展示了下,TP中是$this->display()这里不再赘述。

好了,此时大功告成!

解决问题

问题:原先容器绑定的事件被新容器替换掉了,新容器的div没有绑定事件,所以JQ等绑定的事件无效。如多说评论框无法正常使用。

解决:用pjax的加载完成后的回调函数再次绑定即可!

<script>
$(document).on('pjax:complete', function() {
    pajx_loadDuodsuo();//pjax加载完成之后调用重载多说函数
});
function pajx_loadDuodsuo(){
    var dus=$(".ds-thread");
    if($(dus).length==1){
        var el = document.createElement('div');
        el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
        el.setAttribute('data-url',$(dus).attr("data-url"));
        DUOSHUO.EmbedThread(el);
        $(dus).html(el);
    }
}
</script>

进一步优化

过渡动画效果:

pjax.js提供了两个api:

<div class="loading"></div>//用css+js写你的过渡动画效果
<script>
$(document).on('pjax:send', function() { 
    $(".loading").css("display", "block");//pjax链接点击后显示加载动画;
});
$(document).on('pjax:complete', function() { 
    $(".loading").css("display", "none");//pjax链接加载完成后隐藏加载动画;
});
</script>

pjax与百度编辑器代码高亮 使用pjax后,百度编辑器的代码高亮是没效果的,在回调中使用SyntaxHighlighter.all()是没任何效果的,我们只需在回调函数里调用下SyntaxHighlighter.highlight()即可!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT派

初中级 PHP 面试基础汇总

感觉现在发面试题有些冷门,就跟昨天德国那场似的,不过看看当提前复习了。提前备战。这2个月出门面试的童鞋可注意不要中暑哦。

682
来自专栏PHP技术

jQuery formValidator表单验证插件

jQuery formValidator表单验证插件是客户端表单验证插件。 Query formValidator表单校验插件支持的验证功能(还有很多功能没有罗...

3889
来自专栏Python、Flask、Django

python中用requests获取API参数

1386
来自专栏blackheart的专栏

如何站在使用者的角度来设计SDK-微信公众号开发SDK(消息处理)设计之抛砖引玉

0.SDK之必备的基本素质 在项目中免不了要用到各种各样的第三方的sdk,在我现在的工作中就在公司内部积累了各种各样的的公共库(基于.net的,基于silver...

2039
来自专栏互联网杂技

React一种少用的组件通信方式,但是简单

831
来自专栏性能与架构

Linux ps命令的几个高效用法

(1)显示所有进程 $ ps -ax | less ? (2)只显示某用户的进程 $ ps -u root (3)通过cpu和内存使用来过滤进程 $ ps...

2343
来自专栏MasiMaro 的技术博文

PE文件详解(三)

在执行一个PE文件的时候,windows 并不在一开始就将整个文件读入内存的,二十采用与内存映射文件类似的机制。 也就是说,windows 装载器在装载的时...

823
来自专栏九彩拼盘的叨叨叨

location 对象详解

Location 对象包含有关当前 URL 的信息。 可通过 window.location 属性来访问。

742
来自专栏猿天地

Word转PDF,PNG,HTML神器XDOC

在很多的项目中都会遇到操作Word文件的需求,特别是To B的这种项目。像一些招聘网站最常见的一个功能那就是导出简历啦,可以导出doc,pdf,html等格式。

731
来自专栏Django中文社区

概述

通常情况下,Django 的视图函数(View)是一个纯粹的 Python 函数,它接收一个 request(HTTP 请求),返回一个 response(HT...

2717

扫码关注云+社区