如何在Laravel中使用pjax

简介: 在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:

QQ_20161125121330

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

QQ_20161125121350

4.区别化响应

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

QQ_20161125121550

相关文章
|
前端开发 PHP 开发工具
百度编辑器-easyswoole组件版
百度编辑器-easyswoole组件版
107 0
|
前端开发 JavaScript 程序员
【jquery Ajax 】art-template模板引擎的概念与使用
【jquery Ajax 】art-template模板引擎的概念与使用
125 0
【jquery Ajax 】art-template模板引擎的概念与使用
Laravel 表单验证 使用技巧
Laravel 表单验证 使用技巧
117 0
|
XML 搜索推荐 PHP
使用Laravel动态生成sitemap
Sitemap 形式,就是XML 文件,在其中列出网站中的网址以及关于每个网址的其他元数据(上次更新的时间、更改的频率以及相对于网站上其他网址的重要程度为何等),以便搜索引擎可以更加智能地抓取网站。
162 0
|
JSON 前端开发 JavaScript
Jquery(5)-Ajax速查与常用插件
Jquery(5)-Ajax速查与常用插件
|
JavaScript PHP
laravel注册页面(jquery验证)
laravel注册页面(jquery验证)
185 0
|
JSON 前端开发 JavaScript