打赏银两×

博主辛苦了，我要打赏银两给博主，犒劳犒劳站长。

支付宝支付

微信支付

QQ钱包

php实现pjax无刷新加载页面实例

学习笔记马富天 2016-07-28 14:05:02 70 3

【摘要】pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称，综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页，带给你超快速的浏览器体验，而且有固定链接、标题以及后退按钮都是有效的。jQuery pjax 这款插件可以帮助你把这项技术运用到自己的网站中。

注意如下几点：

引入1.7.0版本以上的jquery.js和pjax.js

ie浏览器中，ie8及之下的版本不支持

pjax的下载地址：https://github.com/defunkt/jquery-pjax

pjax = pushState + ajax

一个关于pjax比较全的文章：http://www.qingzz.cn/pjax_reference_translation

本文只给出pjax的实例

PJAX的基本原理是：

1）捕获页面上的链接点击动作，判断是否为内链

2）对于内链，发起Pjax请求

3）服务器判断请求是否为pjax请求，返回不同内容

4）将Ajax返回结果替换到网页相应位置

5）调用pushStage/replaceStage刷新浏览器状态

$.pjax()方法的使用：

下面直接看代码，所有代码都在一个页面中1.php：

这是静态页面：

```
<!DOCTYPE html>
```
```
<html>
```
```
	<head>
```
```
		<meta charset="utf-8" />
```
```
		<title>Pjax的使用实例</title>		
```
```
		<style type="text/css">
```
```
			*{
```
```
				font-size:12px;
```
```
				margin:0;
```
```
				padding:0;
```
```
			}
```
```
			a
```
```
			{
```
```
				text-decoration:none;
```
```
				color:#D8450B;	
```
```
			}
```
```
			a:hover
```
```
			{
```
```
				text-decoration:underline;
```
```
			}
```
```
			.hide
```
```
			{
```
```
				display:none;
```
```
			}
```
```
			.content
```
```
			{
```
```
				border:1px solid #CCC;
```
```
				margin:60px auto;
```
```
				width:60%;
```
```
				min-height:300px;
```
```
				border-radius:4px;
```
```
				text-align:center;
```
```
				line-height:300px;
```
```
			}
```
```
			.loading
```
```
			{
```
```
				display:none;
```
```
				position:absolute;
```
```
				border:1px solid #D8450B;
```
```
				border-radius:4px;
```
```
				top:100px;
```
```
				left:30%;
```
```
				width:40%;
```
```
				min-height:60px;
```
```
				line-height:60px;
```
```
				text-align:center;
```
```
			}
```
```
			.page
```
```
			{
```
```
				width:60%;
```
```
				margin:10px auto;
```
```
			}
```
```
		</style>
```
```
	</head>
```
```
	<body>
```
```
		<!-- 
```
```
			这里插入PHP数据处理代码
```
```
		 -->
```

		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

		<script type="text/javascript" src="js/jquery.pjax.js"></script>

		<div id="content" class="content"></div>

```
		<div class="page">
```

			<a href="178.html" class="main">首页</a>

			<a href="178.html" class="main">2</a>

			<a href="178.html" class="main">3</a>

			<a href="178.html" class="main">尾页</a>

```
		</div>
```

		<div id="loading" class="loading">正在加载数据中...</div>

		<script type="text/javascript" language="javascript">

			//	此$.pjax()方法的参数列表可以参考上图给出的

			$(document).pjax('.main', '#content', {fragment:'#main', timeout:6000});

		   	$(document).on('pjax:send', function() {

	    		//执行pjax开始，在这里添加要重载的代码，可自行添加loading动画代码。例如你已调用了NProgress，在这里添加 NProgress.start();

```
	    		$('#loading').fadeIn('3000');
```
```
	         });
```

		    $(document).on('pjax:complete', function() {

	        	//执行pjax结束，在这里添加要重载的代码，可自行添加loading动画结束或隐藏代码。例如NProgress的结束代码 NProgress.done();

	        	$('#loading').fadeOut('3000');

```
	        });
```
```
		</script>
```
```
	</body>
```
```
</html>
```

这里插入PHP数据处理代码：

//	要让服务器判断是否是pjax请求，可以通过判断请求头部中是否有HTTP_X_PJAX来实现

```
function is_pjax()
```
```
{
```

	return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'];

```
}
```
```
if(!is_pjax())
```
```
{
```
```
	
```
```
}else
```
```
{
```
```
	if($_GET['page'])
```
```
	{
```
```
		$page = $_GET['page'];
```
```
	}else
```
```
	{
```
```
		$page = 1;
```
```
	}
```
```
	switch ($page) {
```
```
		case '1':
```

				echo '<div id="main" class="hide">第一页（首页）的内容</div>';

```
			break;
```
```
		case '2':
```

				echo '<div id="main" class="hide">第二页的内容</div>';

```
			break;
```
```
		case '3':
```

				echo '<div id="main" class="hide">第三页的内容</div>';

```
			break;
```
```
		case '4':
```

				echo '<div id="main" class="hide">第四页（尾页）的内容</div>';

```
			break;																	
```
```
		default:
```

				echo '<div id="main" class="hide">第一页的内容</div>';

```
			break;
```
```
	}	
```
```
}
```

运行的效果图：

本文代码可以直接复制粘贴到同一个页面1.php文件中，要把juqery.js和juery.pjax.js引入进来，可以直接执行代码，注意的是：IE9之下的IE浏览器并不支持此功能。

版权归马富天PHP博客所有

本文标题：《php实现pjax无刷新加载页面实例》

本文链接地址：http://www.mafutian.net/178.html

转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^

顶1

踩2

上一篇《【面试题】加号和连接符.的优先级比较》下一篇《四大常用知名的uci数据集简介》

分享到：

所有评论

第 3 楼 themebetter 2016-08-11 10:50:19 河北廊坊

博客背景图挺漂亮哈，赞一个。
第 2 楼 个人博客 2016-08-03 14:58:42 浙江杭州

进来看看、学习一下。
第 1 楼 成航先森 2016-08-01 12:27:13 加利福尼亚Los Angeles

网站变化挺大的啊，pjax这玩意最近讨论的也挺多的

首页
上一页
1
下一页
尾页
第1页
每页12条
共1页
共3条

评论审核未开启

回复后邮件通知我

随机阅读换一批

TOP10

浏览最多
评论最多

但愿每次回忆，对生活都不感到负疚。

打赏银两×

php实现pjax无刷新加载页面实例

随机阅读换一批

文章分类

TOP10