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

6,580次阅读
31条评论

前言

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

运行原理

在两个不同的页面,把内容放在同一个容器当中,然后绑定本页的所有a标签,然后替换旧的容器的内容为新的内容。 [v_tips]为了方便理解,我绘制了一个草图(画的不好,不喜勿喷)[/v_tips] Pjax无刷新加载页面基础示例

方法

第一步

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

第二步

在body之前插入以下代码

<script type="text/javascript">
 $(document).pjax('a', '#content', {fragment:'#content', timeout:8000});
</script>
这句话是绑定本页面所有a标签,当链接被点击时,替换#content容器的内容为新的#content容器的内容,ajax超时时间为8秒;

第三步

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

代码展示

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

index.php

<!DOCTYPE HTML>
<head>
	<meta charset="utf-8" />
	<title>页面一</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="pjax.js"></script>
	<script type="text/javascript">
    $(document).pjax('a', '#content', {fragment:'#content', timeout:8000});
	</script>
</head>
<body>
	<div id="content">
	<p>这是第一个页面的文本</p><br />
	<hr />
	<a href="index2.php">到第二个页面</a><br />
	<hr />
	</div>
</body>

index2.php

<!DOCTYPE HTML>
<head>
	<meta charset="utf-8" />
	<title>页面二</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="pjax.js"></script>
	<script type="text/javascript">
    $(document).pjax('a', '#content', {fragment:'#content', timeout:8000});
	</script>
</head>
<body>
	<div id="content">
	<p>这是第二个页面的文本</p><br />
	<hr />
	<a href="index.php">到第一个页面</a><br />
	<hr />
	</div>
</body>

后记

[v_tips]从以前的认为Ajax很难,到现在Pjax都会了。所以说:人只要去学没有学不会的,只有看你自己愿意去研究不,看自己愿意去付出不,即使你再聪明,一个懒足矣把你毁掉!奋斗吧,少年! Pjax无刷新加载页面基础示例 [/v_tips]

13
憧憬Licoy
版权声明:本站原创文章,由憧憬Licoy于2016年07月25日发表,共计2132字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(31条评论)
Loading...
风神博客 评论达人LV.1
2017-05-28 09:16:23 回复

写的不错,懂了

Koolight 评论达人LV.3
2016-12-06 23:25:12 回复

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

堆爱博客 评论达人LV.1
2016-08-08 21:56:23 回复

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

Koolight 评论达人LV.3
2016-08-07 23:28:29 回复

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