您的位置:首页 > 编程语言

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

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

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

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

cdn地址:<script type="text/javascript" src="//cdn.staticfile.org/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>

怎么使用呢?如下:
我们给需要用到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"]   
写的应该很详细  不懂得地方可以留言 。
帮到你的话 可以打赏!!!

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: