一、前言
如果要实现页面操作不刷新网站,并且可以在浏览器中进行前进和后退操作,此时我们存在两个方法,一个是通过url的hash值操作
,另一个是通过HTML5的history
方法。下面我们将详细讲解这两个方法。
二、url的hash方法
在url中设置锚点,此时不会发生刷新效果,此时我们可以监听url的hash值的改变,然后进行请求数据,然后渲染页面即可,此时也是可以实现浏览器前进后退不刷新页面的效果的。
如上图所示,此时我们当点击a
链接时,此时改变url
的hash
值,此时我们可以通过监听url
的hashchange
方法,来执行相应的函数。优点:hash值方法优势是兼容性好,在老版本的ie中可以运行,但是存在一个缺陷,就是存在#,显得url地址不真实。
三、HTML5的history api
在html5
中存在一些api,可以实现改变地址url但是不刷新页面。
此时如果我们不使用html5中的api,直接进行a链接切换页面,此时会进行刷新。
如下图所示,此时对上面的标签设置相关的事件,执行相关的函数。
这里的e.preventDefault()
表示阻止默认事件。然后通过history api中的pushstate
将内容放入其中。
如果想要切换服务器数据,并且达到无刷新,可以在popstate
监听函数中和a连接点击时触发ajax向服务器发起请求
。
三、history 的 6个api总结replaceState
:替换原来的路径。pushState
:使用新的路径。popState
:路径回退。go
:向前或者向后。back
:向后改变路径。forward
:向前改变路径。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_47450807/article/details/122993140
内容来源于网络,如有侵权,请联系作者删除!