最近新项目需要用到pjax技术加载页面,提高响应速度,而我们使用的是新的laravel框架,在网上还没有laravel中使用pjax的详细指导,所以在这里做一下整理,与君共勉。
1.环境需求
2.部署和搭建
laravel的部署网上有很多教程,这里不再赘述。PJAX的部署很简单,只有一个js文件。
在laravel/public/目录下 创建JS文件夹,然后把jquery和PJAX拷贝进去。
3.测试
在 resources/views/ 目录下 创建 index.blade.php ,内容以官方文档为例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pjax测试页</title>
<script type="text/javascript" src="js/jquery2.1.4.min.js" ></script>
<script type="text/javascript" src="js/jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
$(document).pjax('a', '#pjax-container');
});
</script>
</head>
<body>
<h1>My Site</h1>
<div class="container" id="pjax-container">
Go to <a href="page">next page</a>.
</div>
</body>
</html>
再创建一个用于动态加载的页面, page.blade.php ,内容就一行:<div>SUCCESS!</div>
接着,我们去路由表中注册,在routes.php下面加上:
Route::get('index',function (){
return view('index');
});
Route::get('page',function (){
return view('page');
});
访问运行,呼出控制台,点击next page:
看到控制台没有重新加载整个页面,而是直接显示出了SUCCESS,浏览器地址栏也变成了localhost/page, OK成功了。
4.区别化响应
分析下PJAX的报文,发现它加上了一个X-PJAX的头部标识,并传递了所绑定的容器名。所以在后端,我们根据这一标识,来区别响应。当检测到X-PJAX头部标识只返回内容,当用户直接访问该页面,则连同页头页脚一起返回。