pjax使用小结

简介

虽然传统的 ajax 方式可以异步无刷新改变页面内容，但无法改变页面 URL，因此有种方案是在内容发生改变后通过改变 URL 的 hash 的方式获得更好的可访问性，但是 hash 的方式有时候不能很好的处理浏览器的前进、后退，而且常规代码要切换到这种方式还要做不少额外的处理。而 pjax 的出现就是为了解决这些问题，简单的说就是对 ajax 的加强。

pjax 结合 pushState 和 ajax 技术，不需要重新加载整个页面就能从服务器加载 Html 到你当前页面，这个 ajax 请求会有永久链接、title 并支持浏览器的回退/前进按钮。

pjax使用前

bug错误

在使用jquery.pjax的时候发现加载页面时不会执行其中的layui以及jquery的初始化方法，包括一些插件的初始化方法。

查看源码后发现该jquery.pjax替换容器内容时，是将服务器端返回的html转换为了jquery dom节点然后再执行的替换，但是这样操作会导致一系列的加载事件不会被触发，导致例如jquery和layui的初始化方法不会被执行。

于是决定将添加dom节点修改为直接添加html片段。

解决修改代码

.将jquery.pjax.js中311行的 context.html(container.contents)修改为 context.html(data)。

这样在pjax加载新页面的时候便会直接将服务器端返回html片段添加进容器。

但是这样仅处理了新增页面，而执行回退操作时pjax会从缓存中读取上一个页面的内容，同样pjax在回退上一个页面的时候依然是以dom节点的方式存储和添加的，所以我们还需要继续修改。

将365行的

cachePush(pjax.state.id,[options.container,cloneContents(context)])

修改为

  cachePush(pjax.state.id, [options.container, context.html()])

到此修改完成，此时使用pjax加载新页面的时候，layui jquery等插件的初始化方法即可正确执行。

用法

引入 jquery 和 jquery.pjax.js
注册事件

/**
  * 方式一 按钮父节点监听事件
  *
  * @param selector  触发点击事件的按钮
  * @param container 展示刷新内容的容器，也就是会被替换的部分
  * @param options   参数
  */
$(document).pjax(selector, [container], options);

// 方式二 直接对按钮监听，可以不用指定容器，使用按钮的data-pjax属性值查找容器
$("a[data-pjax]").pjax();

// 方式三 常规的点击事件监听方式
$(document).on('click', 'a', $.pjax.click);
$(document).on('click', 'a', function(event) {
    var container = $(this).closest('[data-pjax-container]');
    $.pjax.click(event, container);
});

// 下列是源码中介绍的其他用法，由于本人暂时没有那些需求暂时没深究，有兴趣的各位自己试试看哈
// 表单提交
$(document).on('submit', 'form', function(event) {
    var container = $(this).closest('[data-pjax-container]');
    $.pjax.submit(event, container);
});
// 加载内容到指定容器
$.pjax({ url: this.href, container: '#main' });
// 重新当前页面容器的内容
$.pjax.reload('#container');

如何将Pjax整合进网站，实现全站无刷新加载？（以本站为例）

<!-- <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script> -->
<!-- <script src="/player/js/jquery.js"></script> -->
<script src="/player/js/jquery.cookie.js"></script>
<script src="/player/js/jquery.pjax.js"></script>

<script>

// 自定义
jQuery(window).load(function() {
  
	//n2-ss-3-placeholder
	jQuery(document).pjax('a[target!=_blank]', 'body', {fragment:'body', timeout:6000});
	jQuery(document).on('submit', 'form', function (event) {jQuery.pjax.submit(event, 'body', {fragment:'body', timeout:6000});});
	jQuery(document).on('pjax:send', function() {
		jQuery('body').fadeTo(700,0.0);
	});
	jQuery(document).on('pjax:complete', function() {
		var url=window.location.href;
		console.log(url);
		var val=url.indexOf("%e5%ad%a6%e4%b9%a0%e8%a1%8d%e7%94%9f%e5%93%81");
	   if(val!=-1){
		   val=url.slice(64);
			if(val!==""){
				
				jQuery("#primary").css("width","100%");
			}
	   }
		jQuery('body').fadeTo(700,1);
	});
	jQuery(document).on('click', '#wpnp_previous', $.pjax.click);
	jQuery(document).on('click', '#wpnp_next', $.pjax.click);
	
	
});
</script>
<script id="ilt" src="/player/js/player.js" ></script>
<style>
	.aaa{display:none;position:fixed !important; position:absolute; bottom:0px; right:0px;width:350px;height:600px }
	
</style>

衍生品：网站左边的音乐播放器，和右边的客服系统

客服系统测试后台

地址：http://kefu.zlhdsg.com/admin

用户名：admin

密码：admin

客服系统未加密版200一套，加密版50一套，带使用方法、数据库以及全部源码，有意私聊，hyperf初学者，以及大学和硕士php方面论文编写的同学有很大参考价值。。

相关文章: