Laravel ‘优雅’ 的通过中间件使用 pjax

pjax 是什么我就不解释了,我们来看看在 laravel 里面怎么使用。

使用 juqury 插件 jquery.pjax.js,它会把你指定的 a 标签进行跳转拦截,并添加点击事件,获取 a 标签链接向服务器发送带有头部标识的 ajax 请求,将获取的内容填充到你指定的容器。并对内容里面的 js 和 css 进行搬家,其实就是给你把 js 和 css 搬到头部去,(这里有 bug,最好屏蔽掉。)

因为浏览器不刷新,会产生更大的内存开销,之前加载的 js new 出来的对象没有释放再次加载会有重复的对象。在使用 wangEditor 编辑器就会出现这种提示,在 45 行:

    (function (window, $) {
    if (window.wangEditor) {
    // 重复引用
    alert('一个页面不能重复引用 wangEditor.js 或 wangEditor.min.js !!!');
    return;
     }

虽然有缺点,不过我强烈建议现代 web 都应该使用。体验超级棒!!!!!!
在 laravel 中
首先,我们需要两个布局模板,一个是带有全部内容的模板,
还有一个空布局模板。然后我们可以在路由中间件哪里把所有的请求进行过滤或者称之为判断,判断是 pjax 请求就继承空布局,否则继承 app 布局。
设置 pjax 中间件。

 if ($request->pjax())
    $request->query->set('layout', 'layouts.pjax');
 else $request->query->set('layout', 'layouts.app');

在继承模板的地方使用

@extends(Request::instance()->layout)

ok。前端在进行相关设置就好了。
可以在 app 模板下面引入 js。

$(document).pjax('[pjax] a, a[pjax]', '#pjax-content');
$(document).on('pjax:start', function() {
        NProgress.start();
});
$(document).on('pjax:end', function() {
       NProgress.done();
});

现在,只要在 a 标签上添加 pjax 属性就实现了 pjax,请注意,在资源下载的 a 标签上请不要使用 pjax.

刚学 laravel 不久,如果那些地方我说的不对或者我有些错误的观点,请让我知道。谢谢。

本帖已被设为精华帖!
本帖由系统于 5年前 自动加精
森林
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 2
bestcyt

有没有小 demo 参考一下或者开源 demo

6年前 评论
森林

@Krish 你好,需要在 a 标签上添加 pjax 属性。比如 <a pjax href="">链接</a> 这样 pjax 才能找到你的 a 标签并进行拦截。也可以通过 js 全局添加 pjax 属性。

4年前 评论