如何在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

相关文章
|
存储 小程序 NoSQL
laravel5.8(九)session基本使用
Session这个玩意还是挺重要的。 Laravel对于session的支持还是很完全的。 一:文件位置 Session 配置文件位于 config/session.php。 默认情况下,Laravel 使用的 Session 驱动为 file 驱动,这对许多应用而言是没有什么问题的。 在生产环境中,你可能考虑使用 memcached 或者 redis 驱动以便获取更佳的 Session 性能,尤其是线上同一个应用部署到多台机器的时候,这是最佳实践。 1. 复制代码 Session 驱动用于定义请求的 Session 数据存放在哪里,Laravel 可以处理多种类型的驱动: 1. bash
81 0
|
前端开发 JavaScript
Vue —— 进阶 AJAX(解决开发环境 Ajax 跨域问题)
Vue —— 进阶 AJAX(解决开发环境 Ajax 跨域问题)
171 0
|
JSON JavaScript 前端开发
yii2.0如何使用vue和后端PHP交互
yii2.0如何使用vue和后端PHP交互
370 0
Laravel 表单验证 使用技巧
Laravel 表单验证 使用技巧
156 0
|
缓存
vue3初体验-keep-alive
vue3初体验-keep-alive
652 0
|
JavaScript PHP
laravel5.5 + vue2.* +element-ui
laravel5.5 + vue2.* +element-ui
laravel5.5 + vue2.* +element-ui
|
JavaScript 前端开发
前端:vue中jsonp插件的使用
前端:vue中jsonp插件的使用
264 0
|
前端开发 JavaScript
基于jQuery的ajax对WebApi和OData的封装
基于jQuery的ajax对WebApi和OData的封装     WebApi 的使用带来了一个显著的特点,对type有一定的要求。一般ajax的type无非就是两种,GET和POST。如果用JSONP来跨域的话,就只能用GET。
1493 0