pjax实现无刷新

最新推荐文章于 2024-06-25 09:50:07 发布

Eyseem

最新推荐文章于 2024-06-25 09:50:07 发布

阅读量3.9k

点赞数 3

分类专栏：前端文章标签： pjax 无刷新

本文链接：https://blog.csdn.net/Eyseem/article/details/51497737

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery的Pjax插件，Pjax即pushState + Ajax，是实现无刷新ajax加载并解决浏览器前进和后退问题的一个开源实现。优于ajax无刷新的是，pjax在实现无刷新更改页面时，同时更改了url。

1、我们只需在前端页面中引入jquery和pjax插件。如下代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf8">
	<title>pjax测试</title>
	<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="jquery.pjax.js"></script>
	<style type="text/css">
		#main{border:1px solid red;width: 1000px;height: 500px;margin: 0px auto}
		.click{margin: 0px auto;text-align: middle;width: 1000px;margin-top: 20px;}
	</style>
</head>
<body>
<div id="main"></div>
<div class="click">
	<button class="red">红色模板</button>
	<button class="green">绿色模板</button>
</div>
<script type="text/javascript">
	$('button').bind('click',function(){
		var color=$(this).attr('class');
        $.pjax({
		  url: 'change.php?color='+color,
		  container: '#main'
		})
    });
</script>
</body>
</html>

2、后端用php实现

<?php
$color=$_GET['color'];
if($color){
	$path=$color.'.html';
	include($path);
}

而red.html和green.html是这样的，无非是一段不同背景的html。

<div id="color" style="background-color:red;width:100%;height:100%;"></div>

这样我们就实现了，点击按钮无刷新地更改id="main"的div内容，并且，url是随着请求的地址一起变的。

总结：

1、pjax不能在后端直接输出字符串，必须是html包裹的内容，否则就是页面直接刷新了。

2、如果想在后端实现复杂的判断等功能，$_SERVER['HTTP_X_PJAX']，可以提供判断是否为pjax请求。

Eyseem

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录