不刷新页面更新内容的方法
不刷新页面更新内容的方法
一个页面, 显示一篇武侠小说,这篇武侠小说有只有5个章节。
武侠小说主页假设为百度主页https://www.baidu.com/
5个章节的内容都是从后端获取。
武侠小说主页
- 武侠小说第1章
- 武侠小说第2章
- 武侠小说第3章
- 武侠小说第4章
- 武侠小说第5章
如何实现不刷新页面更新内容的方法,比如说,点击武侠小说第1章
,显示第1章的内容,
点击武侠小说第2章
,显示第2章的内容,但是url便没有变化。
普通的ajax实现
每次点击某一章节的时候,获取标识符,然后通过标识符获取相应的API请求数据,显示到页面。
缺点:
在不同章节之间切换的时候,地址栏的url是一样的,这样就不能固定到某一个url了,
比如我看到武侠小说第3章,想要bookmark到武侠小说第3章,是做不到的,每次打开这个页面都是默认的页面。
比如我看到武侠小说第3章
了,我想通过浏览器的后退按钮返回到武侠小说第2章
,这也是做不到的,因为武侠小说第2章
和武侠小说第3章
的url没有区别,点击浏览器的后退按钮只能返回其他不同的url上去了。
改进的ajax实现
为了解决上面的问题,可以让每个章节的url不同,但是我又不想更新整个页面,不想更新整个页面可以通过ajax实现,实现不同的url可以通过在url后面添加hash
,url后添加hash
是不会更新页面的,并且还会保存到history中。
实现:
点击武侠小说第1章, location.hash = frist
;
点击武侠小说第2章, location.hash = second
;
点击武侠小说第3章, location.hash = thrid
;
点击武侠小说第4章, location.hash = fouth
;
点击武侠小说第5章, location.hash = five
;
每次点击武侠小说章节的时候,先获取hash的值,如果没有location.hash值,默认赋值location.hash = frist
;然后通过location.hash值,发送ajax请求,获取相应的数据。
这样就现实了每个章节有不同的url,可以bookmark了,比如bookmark了第3章,通过bookmark进入第3章后,看的是第3章的内容了,而不是默认的第1节的内容了。
因为location.hash会储存在history中的,所以浏览器的前进后退按钮也有效的,比如现在看到武侠小说第2章了,点击武侠小说第2章,武侠小说第2章的url是https://www.baidu.com#second, 这个https://www.baidu.com#second
是会保存在history对象中的,
武侠小说第2章看完了,点击武侠小说第3章,武侠小说第3章的url是https://www.baidu.com#thrid, 这个https://www.baidu.com#thrid
也是会保存在history对象中的, 点击浏览器的后退按钮,则返回到了武侠小说第2章。
只改变hash,是不会刷新页面的,但是会把这个url添加到history对象中
history对象
通过改进的ajax,实现了浏览器前进后退按钮无效的问题。
还有一个问题,进入到武侠小说主页,由于没有设置hash,会默认添加location.hash = frist
;这时我们会看到武侠小说第1章的内容,可是如果这时候,点击浏览器的后退按钮,浏览器的url从https://www.baidu.com#frist
变成了https://www.baidu.com
,内容便没有改变,再一次点击浏览器的后退按钮,才会返回我们真正想返回的页面。
当第一次进入武侠小说主页时, history中保存https://www.baidu.com
, 因为没有hash, 通过 location.hash = frist
; 添加hash, 此时往history又添加了一条记录,https://www.baidu.com#frist
, 所以我们需要返回2次,相对于history.pushState()
。
想要一次返回,要么武侠小说主页url写成https://www.baidu.com#frist
,要么使用
history.replaceState()
。
关于history的可以参考这里。
不刷新页面更新内容的方法相关推荐
- 超级简单的自动刷新_Excel动态透视表,刷新即可更新内容,简单方便 #职场 #办公技巧...
Excel动态透视表,刷新即可更新内容,简单方便 #职场 #办公技巧 工作中还是比较喜欢用透视表来分析数据,简单,方便,快捷,又不需要太懂函数.VBA. 但是,如果数据增加了,直接刷新的话,透视出来的 ...
- 小程序不刷新页面更新数据
微信小程序不刷新页面更新数据 小程序刷新页面过程大家都懂得,特别是网络不好的时候,觉得这te,ma,就是一种折磨,如何做到不刷新页面就可以更新数据? 页面栈: 小程序的每一个页面都是一个page对象, ...
- JS刷新页面的几种方法
转载自 JS刷新页面的几种方法 Javascript刷新页面的几种方法: 1 history.go(0) 2 location.reload() 3 location=location 4 loc ...
- Javascript刷新页面的几种方法。
Javascript刷新页面的几种方法: 1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(locat ...
- Js 几种刷新页面最快的方法
一直在Js学习路上,关于刷新页面也有很多内容要学习,这篇算是做笔记吧.刷新页面是经常遇到的问题,Js也有很多可以刷新页面的方法. 比如,在我找到的刷新页面的方法中,下面三个是比较快的. window. ...
- CEdit 控件 更新内容的 方法(可以自动滚动至末尾)
CEdit 控件更新内容大概有如下几种方法: 1.关联CString变量.先改变CString变量的值,然后调用UpDateData(FALSE)来更新控件.如果需要滚动至末尾一行,可以调用 [cpp ...
- vue在刷新页面的时候调取方法
项目场景: 最近再做一个软电话,需求表示,关闭页面的时候电话签出.但是刷新页面的时候没有调取签出方法,demo上是写的window.onbeforeunload = function(){} 问题描述 ...
- php无闪动刷新,简单的无闪动刷新页面/部分内容
页面需要定时刷新显示实时数据,直接location.refush会很明显的闪动页面,体验不好,其实可以用pjax的,但是这里只用一次就不那么麻烦了,来个简单的 下面的js放在上面的最后一个script ...
- HTML中 js刷新页面的几种方法
reload() 方法: 该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取 ...
最新文章
- 5、CC2541芯片中级教程-OSAL操作系统(PWM+看门狗)
- 分类系列之感知器学习算法PLA 和 口袋算法Pocket Algorithm
- 九、SpringBoot集成Thymeleaf模板引擎
- 解决svn中文乱码的问题
- vc 查看硬盘盘符剩余空间
- 计算机模拟人工录入,用计算机模拟交互式输入代替人工进行流程录入
- 【转】彻底理解cookie,session,token
- C++_二维数组_定义方式_数组名称的作用_案例考试成绩统计---C++语言工作笔记021
- c语言编程中如何对其,C语言内存对齐详解(3)
- html5 抓取网页数据,从网页抓取数据的一般方法
- 【linux学习】yum提示 :Another app is currently holding the yum lock; waiting for it to exit...
- 阿里P6、P7、P8、级别需要多少年的工作经验,还是因能力而定?
- OpenResty安装、启停止_linux
- Android 根据身份证号判断性别
- 智慧城市在物联网技术与行业应用
- 涂鸦三明治开发套件开箱及固件下载
- 新零售未来的发展趋势怎么样?
- python3.7安装dlib库,无须安装vs
- epson r330语言设置_爱普生打印机使用方法 爱普生r330打印机故障
- Java笔记09——常用类
热门文章
- SpringCloud( H版 alibaba )框架开发教程(中级)
- 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢?
- 【日语五十音图快速记忆法】(看了这个,真的很好记)
- ROS节点开机自启动
- 虚拟服务器怎么突破磁盘2t,创建一个拥有超过2T数据盘的Windows虚拟机
- 苹果首席设计师艾维将离职开办新公司 还会开发苹果产品
- Android数据持久化
- win10自动修复处理方法
- opencv2.4.13在win10+VS2015下的配置过程
- spark-ml和jpmml-sparkml生成pmml模型过程种遇到的问题