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不久,如果那些地方我说的不对或者我有些错误的观点,请让我知道。谢谢。

本帖已被设为精华帖!
本帖由系统于 4年前 自动加精
森林
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 2
bestcyt

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

5年前 评论
森林

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

3年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!