最近新项目需要用到pjax技术加载页面,提高响应速度,而我们使用的是新的laravel框架,在网上还没有laravel中使用pjax的详细指导,所以在这里做一下整理,与君共勉。
LaravelPJAXJquery 1.7
laravel的部署网上有很多教程,这里不再赘述。PJAX的部署很简单,只有一个js文件。在laravel/public/目录下 创建JS文件夹,然后把jquery和PJAX拷贝进去。
在 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成功了。
分析下PJAX的报文,发现它加上了一个X-PJAX的头部标识,并传递了所绑定的容器名。所以在后端,我们根据这一标识,来区别响应。当检测到X-PJAX头部标识只返回内容,当用户直接访问该页面,则连同页头页脚一起返回。
相关资源:laravel-pjax:用于Laravel的pjax中间件-源码