pjax笔记

最新推荐文章于 2024-08-10 07:06:20 发布

wbainngg123

最新推荐文章于 2024-08-10 07:06:20 发布

阅读量1.2k

点赞数

分类专栏： laravel

laravel 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用中遇到的问题：

github地址：https://github.com/defunkt/jquery-pjax

首先如果每个页面对应一个js ，使用<script src>引入，点击加载相应页面的时候加载对应js，需要把<script src>写在pjax container div内部，不然不会加载。@extends('home.announcement')
@section('information')
<script src="{{asset('assets/js/myjs.js')}}"></script>
<div class="main">。。。。。是html文档
即使<script src>加在container内部，也有问题，第一次跳转该页面的时候会加载一次该js，再次点击就不会重新加载(缓存引起)，js内部执行初始化的代码就不会被执行。
http://www.cnblogs.com/qidian10/p/5186007.html 博客里提供了修改后的pjax代码：
注释下面两行代码
```
//obj.scripts = findAll(obj.contents, 'script[src]').remove()
//obj.contents = obj.contents.not(obj.scripts)
```
还增加了一个cache配置属性用于解决IE缓存问题默认为false
点击a标签跳转页面时有时全局刷新有时局部刷新，因为没设置timeout:8000，pjax默认的超时时间是1s,超时就会进行全局加载^_^。

在使用表单提交时需要在js中加入以下pjax.submit代码；而需要重新加载时只需pjax.reload即可

`$.pjax.submit`

Submits a form via pjax.

$(document).on('submit', 'form', function(event) {
  $.pjax.submit(event, '#pjax-container')
})

$.pjax.reload

Initiates a request for the current URL to the server using pjax mechanism and replaces the container with the response. Does not add a browser history entry.

$.pjax.reload('#pjax-container', options)

以下是安装和使用步骤：

1、简介

Pjax 是一个 jQuery 插件，其作用是使用 ajax 来加速页面加载时间，工作原理是只从服务器获取指定 HTML 片段，然后客户端使用获取到的内容更新局部页面。

Laravel Pjax 扩展包将 Pjax 集成到 Laravel 中，实现原理是提供一个中间件，返回 Pjax 期望的响应内容。

2、安装

通过 Composer 安装扩展包：

$ composer require spatie/laravel-pjax

接下来需要在 Kernel.php 中注册中间件，这里我们将其注册到web中间件组：

// app/Http/Kernel.php
protected $middlewareGroups = [
    'web' => [
        ...
        \Spatie\Pjax\Middleware\FilterIfPjax::class,
    ],
    ...
];

3、使用

该扩展包提供的中间件会处理服务端返回的内容并将其转化为 Pjax 插件期望服务端返回的内容。

这里我们以 php artisan make:auth 命令生成的默认视图文件为例演示其使用，首先我们修改路由文件routes.php：

Route::group(['middleware' => 'web'], function () {
    Route::get('/', function () {
        return view('welcome');
    });
    Route::get('/home', 'HomeController@index');
    Route::auth();
});

然后我们还需要修改默认布局文件 layouts/app.blade.php，添加 Pjax 设置：

...

<div class="main-content" id="pjax-container">
    @yield('content')
</div>

<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>
<script>
    $(document).pjax('a', '#pjax-container');
    $(document).on("pjax:timeout", function(event) {
        // 阻止超时导致链接跳转事件发生
        event.preventDefault()
    });
</script>
</body>
</html>