如何在Laravel中使用pjax

最近新项目需要用到pjax技术加载页面,提高响应速度,而我们使用的是新的laravel框架,在网上还没有laravel中使用pjax的详细指导,所以在这里做一下整理,与君共勉。

1.环境需求

Laravel
PJAX
Jquery 1.7

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:

如何在Laravel中使用pjax

看到控制台没有重新加载整个页面,而是直接显示出了SUCCESS,浏览器地址栏也变成了localhost/page, OK成功了。

如何在Laravel中使用pjax

4.区别化响应

分析下PJAX的报文,发现它加上了一个X-PJAX的头部标识,并传递了所绑定的容器名。所以在后端,我们根据这一标识,来区别响应。当检测到X-PJAX头部标识只返回内容,当用户直接访问该页面,则连同页头页脚一起返回。

如何在Laravel中使用pjax

上一篇:《Hadoop MapReduce性能优化》一2.4 用Apache Ambari监测Hadoop


下一篇:ArcGIS Engine中正确释放打开资源