实现页面局部刷新、部分代码改变

很多情况下 我们只希望 页面的一部分代码发生改变 因为总有一些代码是页面共用的
 这时候我们就可以使用pjax来实现


首先插几句闲话:location.href="www.baidu,com";这种的页面变化是直接刷新页面;
而vue中的router则是通过 改变游览器的hash来改变代码 ;
 pjax的实现原理便是这样 ;


首先:引入插件的cdn(有的人还不知道cdn什么意思,这里简单给不懂的童鞋说一下:我们平常使用插件先进官网然后下载,再放到自己的项目文件夹里面,大可不必这样。你直接使用一条链接就可以解决)


cdn地址:

怎么使用呢?如下:

我们给需要用到pjax的页面中执行一下步骤:
第一:给需要改变的那部分代码外层的容器(也就是包裹代码的标签 比如div)写一个id或者class,id或者class名需要每个页面
        都是一样的。

第二:js代码执行:

                function initPjax() {
                        if (!!(window.history && history.pushState)) {
                                $(document).pjax('a:not(a[target="_blank"])', 'div[id="pjax-box"]', {
                                        fragment: 'div[id="pjax-box"]',
                                        time: 5000
                                });
                        }

                }

initPjax();

这里面需要改的 就是   div[id="pjax-box"]里面的id名  你也可以使用 class:div[class="box"]   
写的应该很详细  不懂得地方可以留言 。
帮到你的话 可以打赏!!!
实现页面局部刷新、部分代码改变_第1张图片

你可能感兴趣的:(前端,前端插件)