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

学习笔记 马富天 2016-07-28 14:05:02 109 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:

这是静态页面:

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>Pjax的使用实例</title>		
  6. 		<style type="text/css">
  7. 			*{
  8. 				font-size:12px;
  9. 				margin:0;
  10. 				padding:0;
  11. 			}
  12. 			a
  13. 			{
  14. 				text-decoration:none;
  15. 				color:#D8450B;	
  16. 			}
  17. 			a:hover
  18. 			{
  19. 				text-decoration:underline;
  20. 			}
  21. 			.hide
  22. 			{
  23. 				display:none;
  24. 			}
  25. 			.content
  26. 			{
  27. 				border:1px solid #CCC;
  28. 				margin:60px auto;
  29. 				width:60%;
  30. 				min-height:300px;
  31. 				border-radius:4px;
  32. 				text-align:center;
  33. 				line-height:300px;
  34. 			}
  35. 			.loading
  36. 			{
  37. 				display:none;
  38. 				position:absolute;
  39. 				border:1px solid #D8450B;
  40. 				border-radius:4px;
  41. 				top:100px;
  42. 				left:30%;
  43. 				width:40%;
  44. 				min-height:60px;
  45. 				line-height:60px;
  46. 				text-align:center;
  47. 			}
  48. 			.page
  49. 			{
  50. 				width:60%;
  51. 				margin:10px auto;
  52. 			}
  53. 		</style>
  54. 	</head>
  55. 	<body>
  56. 		<!-- 
  57. 			这里插入PHP数据处理代码
  58. 		 -->
  59. 		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
  60. 		<script type="text/javascript" src="js/jquery.pjax.js"></script>
  61. 		<div id="content" class="content"></div>
  62. 		<div class="page">
  63. 			<a href="?page=1" class="main">首页</a>
  64. 			<a href="?page=2" class="main">2</a>
  65. 			<a href="?page=3" class="main">3</a>
  66. 			<a href="?page=4" class="main">尾页</a>
  67. 		</div>
  68. 		<div id="loading" class="loading">正在加载数据中...</div>
  69. 		<script type="text/javascript" language="javascript">
  70. 			//	此$.pjax()方法的参数列表可以参考上图给出的
  71. 			$(document).pjax('.main', '#content', {fragment:'#main', timeout:6000});
  72. 		   	$(document).on('pjax:send', function() {
  73. 	    		//执行pjax开始,在这里添加要重载的代码,可自行添加loading动画代码。例如你已调用了NProgress,在这里添加 NProgress.start();
  74. 	    		$('#loading').fadeIn('3000');
  75. 	         });
  76. 		    $(document).on('pjax:complete', function() {
  77. 	        	//执行pjax结束,在这里添加要重载的代码,可自行添加loading动画结束或隐藏代码。例如NProgress的结束代码 NProgress.done();
  78. 	        	$('#loading').fadeOut('3000');
  79. 	        });
  80. 		</script>
  81. 	</body>
  82. </html>

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

  1. //	要让服务器判断是否是pjax请求,可以通过判断请求头部中是否有HTTP_X_PJAX来实现
  2. function is_pjax()
  3. {
  4. 	return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'];
  5. }
  6. if(!is_pjax())
  7. {
  8. 	
  9. }else
  10. {
  11. 	if($_GET['page'])
  12. 	{
  13. 		$page = $_GET['page'];
  14. 	}else
  15. 	{
  16. 		$page = 1;
  17. 	}
  18. 	switch ($page) {
  19. 		case '1':
  20. 				echo '<div id="main" class="hide">第一页(首页)的内容</div>';
  21. 			break;
  22. 		case '2':
  23. 				echo '<div id="main" class="hide">第二页的内容</div>';
  24. 			break;
  25. 		case '3':
  26. 				echo '<div id="main" class="hide">第三页的内容</div>';
  27. 			break;
  28. 		case '4':
  29. 				echo '<div id="main" class="hide">第四页(尾页)的内容</div>';
  30. 			break;																	
  31. 		default:
  32. 				echo '<div id="main" class="hide">第一页的内容</div>';
  33. 			break;
  34. 	}	
  35. }

运行的效果图:

请输入图片名称

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

版权归 马富天个人博客 所有

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

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

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

1

2

上一篇《 【面试题】加号 和连接符.的优先级比较 》 下一篇《 java中比较两个字符串是否相等 》

所有评论

  1. 首页
  2. 上一页
  3. 1
  4. 下一页
  5. 尾页
  6. 第1页
  7. 每页12条
  8. 共1页
  9. 共3条
评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多