如何在Laravel中使用pjax

最新推荐文章于 2024-05-20 10:07:32 发布
最新推荐文章于 2024-05-20 10:07:32 发布
阅读量287 收藏
点赞数
文章标签： php javascript ViewUI
原文链接：https://yq.aliyun.com/articles/64899
版权

最近新项目需要用到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

weixin_34248118
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
laravel pjax
angelo_gs的博客
03-04 371
第一步： 通过 Composer 安装扩展包： composerrequirespatie/laravel-pjax 第二步： 接下来需要在Kernel.php中注册中间件，这里我们将其注册到web中间件组： //app/Http/Kernel.php protected $middlewareGroups = [ 'web' =&gt; [ ......
在 Laravel 应用中使用 pjax 进行页面加速
07-08 144
说明# PHPHub 使用 pjax 来加速网页的加载, 这篇文章是在开发完此功能后做的笔记. 什么是 Pjax# .--. / \ ## a a ( '._) |'-- | _.\___/_ ___pjax___ ."\> \Y/|<'. '._.-' ...
使用Laravel Pjax提升Web应用性能
最新发布
gitblog_00077的博客
05-20 356
使用Laravel Pjax提升Web应用性能 项目地址:https://gitcode.com/spatie/laravel-pjax 1、项目介绍 Laravel Pjax 是一个专为 Laravel 框架设计的中间件，它旨在加速网页加载速度，通过只请求和更新页面中特定的HTML片段来实现Pjax（Pushstate + Ajax）功能。这个开源包由 Spatie 创建，一个位于比利时安特卫普...
在 Laravel 5 中集成 Pjax 实现无刷新加载页面的扩展包 —— Laravel Pjax
will5451的博客
07-26 2750
pushstate  +  ajax   =pajax 一个分页查询的插件 1、简介 Pjax 是一个 jQuery 插件，其作用是使用 ajax 来加速页面加载时间，工作原理是只从服务器获取指定 HTML 片段，然后客户端使用获取到的内容更新局部页面。 Laravel Pjax 扩展包将 Pjax 集成到 Laravel 中，实现原理是提供一个中间件，返回 Pjax 期
Laravel Pjax（PushState + Ajax）无刷新更新页面
gary0309的博客
05-31 232
通过pjax实现无刷新页面更新
laravel-pjax：用于Laravel的pjax中间件
02-02
Laravel的pjax中间件 是一个jQuery插件，它利用ajax来加快页面的加载时间。 它只能通过从服务器获取特定的html片段来工作，而客户端更新仅发生在页面的某些部分。 该软件包提供了一个中间件，该中间件可以返回...
Laravel开发-pjax
08-28
在 Laravel 框架中，Pjax（Push State + AJAX）是一种增强网页用户体验的技术，它允许用户在不重新加载整个页面的情况下更新内容，只刷新部分区域，从而提高页面加载速度和交互性。Pjax 结合了浏览器的 History API ...
Laravel开发-laravel-pjax
08-28
本教程将深入探讨如何在Laravel项目中集成Pjax（Pushstate + Ajax）技术，为用户提供快速、无缝的浏览体验。 **一、PJAX 简介** Pjax，全称为Pushstate + Ajax，是一种前端优化技术，旨在提高网页的用户体验。它...
Laravel开发-laravel-pjax-middleware
08-27
在本文中，我们将深入探讨如何在 Laravel 框架中启用和使用PJAX（Push State + AJAX）中间件。PJAX是一种技术，它允许我们实现快速的页面切换，而无需完全重新加载整个页面，从而提高用户体验。在Laravel中集成PJAX...
pjax-laravel5-demo:在laravel 5中演示pjax
05-02
pjax-laravel5-demo快速开始克隆composer install cp .env.example .env php artisan key:generate php artisan serve执照Laravel框架是根据获得许可的开源软件
laravel框架中文手册_Laravel-Pjax 使用
weixin_39640195的博客
11-29 811
Pjax Pjax介绍:现在很多网站( facebook, twitter)都支持这样的一种浏览方式， 当你点击一个站内的链接的时候， 不是做页面跳转， 而是只是站内页面刷新。 这样的用户体验， 比起整个页面都闪一下来说， 好很多。 其中有一个很重要的组成部分， 这些网站的ajax刷新是支持浏览器历史的， 刷新页面的同时， 浏览器地址栏位上面的地址也是会更改， 用浏览器的回退功能也能够回退到上一...
Laravel-admin的Pjax问题
不主动，不拒绝，不负责
12-02 3762
Laravel-admin的Pjax问题来龙去脉发现问题总结功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 来龙去脉 ...
laravel无刷新加载之pjax
探索未知
08-15 3784
1、简介 Pjax 是一个 jQuery 插件，其作用是使用 ajax 来加速页面加载时间，工作原理是只从服务器获取指定 HTML 片段，然后客户端使用获取到的内容更新局部页面。（关于pjax可以搜索了解） Laravel Pjax 扩展包将 Pjax 集成到 Laravel 中，实现原理是提供一个中间件，返回 Pjax 期望的响应内容。 2、安装通过 Composer 安装扩展包：$
laravel5.8笔记四：中间件
weixin_30363981的博客
02-27 132
应用场景：检测登陆，控制器加载数据，传递常量 命令 //中间件创建命令 php artisan make:middleware Check 注意： 1.需要注册中间件 2.中间件命名不能重复 middleware/Check.php代码 <?php namespace App\Http\Middleware; use Closure; ...
pjax笔记
wbainngg123的专栏
08-02 1247
使用终于到的问题： 首先 如果每个页面对应一个js ，使用引入，点击加载相应页面的时候加载对应js，需要把写在pjax container div内部，不然不会加载。@extends('home.announcement') @section('information') 。。。。。是html文档 即使加在container内部，也有问题，第一次跳转该页面的时候会加
在 Laravel 5.1 中使用 Pjax
weixin_34110749的博客
10-28 58
在 Laravel 5.* 的版本中，使用 Pjax 实现无刷新效果，以及酷炫的进度条 项目地址：https://github.com/yccphp/pjax-for-laravel-5 求 star 求 star 求 star 起因 群里面的朋友老是在问 laravel 怎么和 pjax 结合，于是今天早上答应了给大家写一篇文章，到准...
推荐项目：Laravel 5 的 PJAX 实现 - endachao/pjax-for-laravel-5
gitblog_00025的博客
04-20 608
推荐项目：Laravel 5 的 PJAX 实现 - endachao/pjax-for-laravel-5 项目地址:https://gitcode.com/endachao/pjax-for-laravel-5 项目简介 在网页开发中，我们经常追求快速、流畅的用户体验。endachao/pjax-for-laravel-5 是一个针对 Laravel 5 框架实现的 Progressive ...
禁止form 变成ajax,laravel-admin自定义页面中form禁用pjax使用ajax
weixin_42292855的博客
08-06 638
//增加站点 注意'form:eq(1)，因为laravel-admin的自定义页面本身有一个form$(document).on('click', 'form:eq(1) :button', function (event) {//移除错误提示$(".inputError").remove();//移除错误提示的class$('.form-group').removeClass("has-err...
laravel中使用redis得案例
05-27
在 Laravel 中使用 Redis 需要先安装 Redis 扩展和 Predis 客户端库。可以通过以下命令安装： ```bash $ sudo apt-get install redis-server $ composer require predis/predis ``` 2. 配置 Redis 在 Laravel 中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值