html5 pjax,关于PJAX局部刷新

article/2025/8/27 5:21:14

前言部分

本教程最先来自鬼少博客,后论坛有人补充搜索和评论,然后又被各种转载,转完甚至还有阉割现象,导致会出现各种问题,于是,我这里再重发一次。虽然注释很清楚,但是,还有很多人看不懂,所以,我这里做了个视频,我想只要不是特别笨的,基本都看得懂了。

视频教程

如果高清还看不清,请点击此处

文字教程

先添加必要文件:

然后下面加上:

$(function() {

$(document).pjax('a[target!=_blank]', '#content', {fragment:'#content', timeout:6000}); //这是a标签的pjax。#content 表示执行pjax后会发生变化的id,改成你主题的内容主体id或class。timeout是pjax响应时间限制,如果在设定时间内未响应就执行页面转跳,可自由设置。

$(document).on('submit', 'form', function (event) {$.pjax.submit(event, '#content', {fragment:'#content', timeout:6000});}); //这是提交表单的pjax。form表示所有的提交表单都会执行pjax,比如搜索和提交评论,可自行修改改成你想要执行pjax的form id或class。#content 同上改成你主题的内容主体id或class。

$(document).on('pjax:send', function() {

$(".pjax_loading,.pjax_loading1").css("display", "block");//参考的loading动画代码

//执行pjax开始,在这里添加要重载的代码,可自行添加loading动画代码。例如你已调用了NProgress,在这里添加 NProgress.start();

});

$(document).on('pjax:complete', function() {

$(".pjax_loading,.pjax_loading1").css("display", "none");//参考的loading动画代码

//执行pjax结束,在这里添加要重载的代码,可自行添加loading动画结束或隐藏代码。例如NProgress的结束代码 NProgress.done();

});

});

参考css代码(可自己去百度搜索,本站也有)

.pjax_loading {position: fixed;top: 45%;left: 45%;display: none;z-index: 999999;width: 124px;height: 124px;background: url('images/pjax_loading.gif') 50% 50% no-repeat;}

.pjax_loading1 {position: fixed;top: 0;left: 0;z-index: 999999;display: none;width: 100%;height: 100%;background-color: #4c4c4c;opacity: .2}

参考gif动画

9276572c2d381c1425eaf0d12f341e31.gif

1.前面引用的jquery.pjax.min.js是国外大神写的jquery开源的pjax通用封装插件。

2.网上很多以上封装的教程都没有加上form事件,所以这个教程主要是解决博客的搜索和评论问题。

3.开源Pjax使用这个:https://github.com/defunkt/jquery-pjax

4.如果有需要加播放器的朋友,请进入这个页面https://pjax.cn/grfx/em_player.html


http://chatgpt.dhexx.cn/article/H1q2ZqCf.shtml

相关文章

java pjax_pjax简单实例

ajax缺点是破坏了浏览器的前进后退,因为ajax的请求不会留在历史记录中。pjax就不一样了,pjax被解释成ajaxpushState的封装,因为它把ajax的请求写入历史记录,并反映在地址栏,这样用户就能愉快地使用前进后退了。pjax有好…

Typecho开启全站Pjax

原文地址:Typecho开启全站Pjax 前言 因为上次更新后加入民音乐插件,但是有个问题就是在页面跳转的时候由于页面已经刷新了,所以音乐就不会继续播放了,就想着去引入Pjax来解决这个问题,同时引入pjax后比较直观的改变就…

pjax使用小结

前言 上周看到一篇文章在分析简书 我的主页 页面 3 个 tab 页切换的 bug,起先以为是寻常的样式 bug 而已没怎么在意,后来在文章中看到 pjax 这个术语,长得和 ajax 有点像,遂去了解了下。 简介 虽然传统的 ajax 方式可以异步无刷新…

网站访问速度优化之pjax

pjax 是 ajax 和 pushState 的结合,它是一个 jQuery 插件。它通过 ajax 从服务器端获取 HTML 文件,在页面中用获取到的HTML替换指定容器元素中的内容。然后使用 pushState 技术更新浏览器地址栏中的当前地址,并且保持了真实的地址、网页标题&…

idea热更新

配置idea热更新 第一步:下载插件 JRebel idea-file-settings-plugins搜JRebel 点击installed下载 我这里已经下载好。 第二步:配置GUID 点击jrebel Activation,开始配置 第一行是服务器地址:https://jrebel.qekang.com/{GUID} G…

webpack和vue热更新

目录 webpack一些概念介绍 webpack热更新流程 1. 启动阶段 ①->②->A->B 2. 更新阶段 ①->②->③->④ vue的组件热更新模块 总结 提到热更新,首先我们要有一个概念:Vue有热更新模块,而webpack也有它的HRM模块&#x…

JAVA实现代码热更新

JAVA实现代码热更新 引言类加载器实现热更新思路多种多样的加载来源SPI服务发现机制 完整代码类加载器共享空间机制Tomcat如何实现JSP的热更新Spring反向访问用户程序类问题补充细节推荐资源 引言 本文将带领大家利用Java的类加载器加SPI服务发现机制实现一个简易的代码热更新…

cordova打包app热更新问题

定义: 基于 cordova 框架能将web应用 (js, html, css, 图片等) 打包成 App。当 App 在终端上安装后,不需要重新下载app,实现内壳更新。 原理:1.在项目根目录的config.xml文件中添加指向服务器的地址 2.在www目录中添加chcp.json配…

【热更新】游戏热更新方案

游戏热更新方案 热更新演化热更新方案【1】 进程切换1.1 利用fork、exec切换1.2 利用网关切换1.3 微服务- 进程切换注意要点 【2】 动态库替换【3】 脚本语言热更新热更新探究最简单的实现热更的方法最简单的实现热更的方法的局限性热更新全局替换模块方法的局限性 工程实现1. …

Addressable热更新

文章目录 前提配置代码实现 前提配置 (1)勾选AddressableAssetSettings设置的Disable Catalog Update On Startup选项 (2)相应的热更戏资源分组配置(注:此文采用的是动态资源更新) Can Change …

Nacos配置热更新的4种方式、读取项目配置文件的多种方式,@value,@RefreshScope,@NacosConfigurationProperties

nacos实现配置文件的热更新,服务不用重启即可读取到nacos配置中心修改发布后的最新值,spring,springboot项目读取本地配置文件的各种方式;文章中介绍了一下注解的使用:NacosConfigurationProperties,NacosP…

Unity 热更新技术 | (一) 热更新的基本概念原理及主流热更新方案介绍

🎬 博客主页:https://xiaoy.blog.csdn.net 🎥 本文由 呆呆敲代码的小Y 原创,首发于 CSDN🙉 🎄 学习专栏推荐:Unity系统学习专栏 🌲 游戏制作专栏推荐:游戏制作 &…

JAVA热更新

引言 知识储备先看这篇文章:JAVA Instrument 在这个案例中我们会利用Instrument机制实现一个简单的热更新案例。 总体来说,步骤如下: 创建一个带premain方法的jar包。这个方法定时检测某个文件然后进行热更新。命令行启动业务类时使用参数…

热更新 深度解析

APP热更新方案 为什么要做热更新 当一个App发布之后,突然发现了一个严重bug需要进行紧急修复,这时候公司各方就会忙得焦头烂额:重新打包App、测试、向各个应用市场和渠道换包、提示用户升级、用户下载、覆盖安装。 重点是还会有原来的版本遗留…

webpack热更新

什么是模热更新?有什么优点 模块热更新是webpack的一个功能,它可以使得代码修改之后,不用刷新浏览器就可以更新。 在应用过程中替换添加删出模块,无需重新加载整个页面,是高级版的自动刷新浏览器。 优点&#xff1a…

electron 热更新

1. electron自带的整体更新方式 (全量更新) 这种方式为electron官方的升级更新方式,主要是通过主进程中的autoUpdater模块进行检测升级更新的,此方式也是大家常见的大多数electron应用程序的更新方式。 检测到新版本后从服务器拉…

uniApp实现热更新

热更新 热更新是开发中常见且常用的一种软件版本控制的方式,在uniapp进行使用热更新将软件实现更新操作 思路: 服务器中存储着最新版本号,前端进行查询可以在首次进入应用时进行请求版本号进行一个匹对如果版本号一致则不提示,反之则提示进行…

Android热更新详解

一 前言介绍 正好最近又看到热更新,对以前Android 热修复核心原理:ClassLoader类加载机制做了点补充。 从16年开始开始,热修复技术开始在安卓界流行,它以classloader类加载机制为核心,可以不发布新版本就修复线上 bu…

热更新原理

对于热更新的问题就是了解两个点的问题: 如何加载补丁包,也就是如何加载dex 文件的过程(dex是补丁包,更改的文件都在补丁包中)修复后的类如何替换掉旧的类 通过这篇文章给大家介绍下我理解的热更新的逻辑&#xff0c…

Cocos Creator 3.x 热更新

前言:游戏做热更新 是基本需求; 好在 cocos-creator 已经为我们做好了方案,相对于 U3D 的热更新方案来说,使用起来很简便!,不用关注很多细节 本文使用的是 cocos-creator 3.5.2 版本 官方文档 &#xff1…