Pjax无刷新加载页面基础示例

7,129次阅读

31条评论

今天浏览了一些精美的前端页面，然后看见有些页面运用了 Pjax，让整个页面加载很快。之前很久就想去看看 Pjax 是怎么实现的了，今天就去了解了一下，然后懂得了他的运行原理。下面就来分享一下。

在两个不同的页面，把内容放在同一个容器当中，然后绑定本页的所有 a 标签，然后替换旧的容器的内容为新的内容。[v_tips] 为了方便理解，我绘制了一个草图（画的不好，不喜勿喷）[/v_tips]

首先在页面引入 Jquery1.7 以上的版本以及 pjax.js

在 body 之前插入以下代码

这句话是绑定本页面所有 a 标签，当链接被点击时，替换 #content 容器的内容为新的#content 容器的内容，ajax 超时时间为 8 秒；

完成以上两步就可以执行 pjax 页面替换了，如果还想再加载的时候显示 Loading 页面等等，自己就 CSS 美化一下等等，这个我就不多说了。

如果想更好的理解，就看看下面的代码，看了下面的代码你就懂了。



	
	 页面一 
	
	
	


	
	 这是第一个页面的文本 


	
	 到第二个页面



	
	 页面二 
	
	
	


	
	 这是第二个页面的文本 


	
	 到第一个页面

[v_tips] 从以前的认为 Ajax 很难，到现在 Pjax 都会了。所以说：人只要去学没有学不会的，只有看你自己愿意去研究不，看自己愿意去付出不，即使你再聪明，一个懒足矣把你毁掉！奋斗吧，少年！ [/v_tips]

发表于：HTML、JavaScript、前端技术

2016-07-25

复制链接

13

转载说明：除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处。

JavaScript之基础语法案例展示

JavaScript实时监听歌曲播放进度显示对应歌词

瓦客云音乐源码打包分享

CSS自定义浏览器滚动条样式

PHP类构造函数__construct()理解

QQ登录

风神博客评论达人 LV.1

2017-05-28 09:16:23 回复

写的不错，懂了

Windows

Chrome49.0.2623.221

憧憬Licoy 博主

2017-05-30 15:54:48 回复

@风神博客

Windows

Chrome58.0.3029.81

Koolight 评论达人 LV.3

2016-12-06 23:25:12 回复

这个可以移植到begin这种CMS主题吗？

Windows

Chrome30.0.1599.101

憧憬Licoy 博主

2016-12-07 12:46:26 回复

@Koolight 没有试过呢..

Windows

Chrome54.0.2840.99

堆爱博客评论达人 LV.1

2016-08-08 21:56:23 回复

如何给博主名字后面加上博主两个字？

iPhone

AppleWebKit601.1.46

憧憬Licoy 博主

2016-08-09 10:14:54 回复

@堆爱博客在functions.php搜索“博主”，找到匹配项添加上就可以了

Windows

Chrome52.0.2743.82

Koolight 评论达人 LV.3

2016-08-07 23:28:29 回复

现在都流行全站PJAX，看起来很快的样子。

Windows

Firefox47.0

憧憬Licoy 博主

2016-08-08 09:57:11 回复

@Koolight 是的，因为会减少很多的HTTP请求，所以速度就有明显的提升。

Windows

Chrome53.0.2745.1

«

1

2

Pjax无刷新加载页面基础示例

前言

运行原理

方法

第一步

第二步

第三步

代码展示

index.php

index2.php

后记

Chatroulette-全世界随机视频聊天网站

SpringCloud使用Zuul出现“Forwarding error”错误解决方法

Puock主题常见问题汇总

IntelliJ IDEA下将JavaWeb打包成war包并发布到tomcat步骤说明

LiRecord留言板系统V2.0正式版发布

Puock主题常见问题汇总

由开源项目gogo-protobuf寻找新组织接手引发的思考

Sa-Token实现注解模式的匿名访问

在浏览器端离线给证件照加水印

岛屿数量计算中的DFS和BFS的应用