pjax实现局部刷新

最新推荐文章于 2024-03-29 23:09:34 发布

别吃外卖啦

最新推荐文章于 2024-03-29 23:09:34 发布

阅读量700

点赞数 1

本文链接：https://blog.youkuaiyun.com/JKing01/article/details/115649854

版权

本文介绍了在博客项目中遇到的音乐插件跳转切歌问题，并通过学习pjax实现了页面的局部刷新来解决该问题。文章详细记录了pjax的使用步骤，包括包裹需要刷新的div、jQuery与pjax的引用顺序，以及如何结合表单提交使用pjax。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在写博客项目时想加个Aplayer+MetingJS实现的音乐插件，搞完之后发现跳转到其他页面就自动切歌了，很蠢有木有...

经过一番查阅，看到了很多人用pjax实现局部刷新，自己跟着文档琢磨了下(这是pjax的中文文档)：http://bsify.admui.com/jquery-pjax/?id=pjaxsubmit，记录一下使用的坑：

1、首先是点击跳转时，你想要刷新哪里，哪就需用一个div包起来：

<div id="pjax-container">
你要刷新的容器
</div>

id对应的是要进行局部刷新的div的id
$(document).pjax('a[data-pjax]', '#pjax-container',{fragment: '#pjax-container',timeout: 8000});

而'a[data-pjax]'中data-pjax用来标记你点击哪个a标签时，会使用pjax
<a data-pjax href="#"  class="m-item item m-mobile-hide" >首页</a>

也可全局标记a标签，只要不是跳转到新增标签页的a，都会使用到pjax
$(document).pjax('a[target!="_blank"]', '#pjax-container',{fragment: '#pjax-container',timeout: 8000});