笔记-返回到前一个页面时显示前一个页面中ajax获取的数据
笔记第一部分:http://www.cnblogs.com/zczhangcui/p/6869219.html
在第一部分遇到的问题是,用ajax获取了一系列列表信息后,拼接好html后插入到了原有页面中,类似于一系列新闻列表,点击查看详情后再返回到这一页,会出现所有ajax获取并插入页面的结构都没有了,经过调研,决定尝试从history对象入手。
我使用了history.replaceState方法来改变当前页面的state,每次ajax获取信息后,将页面中希望保留的内容放入state中,当返回到这个页面中时,读取state中的信息,如果state不为null,那么将state中的页面结构展示出来。
步骤很简单,大概分两步:
1、ajax获取信息并拼装到html结构后,将希望保留的html结构放入state中
history.replaceState({current_html: $('.page').html()}, '', '');
一些必须的又不是很重要的信息,可以保存在html中的一个地方,需要用到的时候再读取。比如我就把当前的页数信息保存在html中,这样当返回到这一页中时,我可以读取这个页数信息,通过ajax向服务器请求下一页。
2、返回这个页面的时候,查看state是否保存有信息,如果有就展示出来
var prev_html = history.state && history.state.current_html; if (prev_html) {$('.page').html(prev_html); }
这样就基本实现了返回后依然显示之前ajax请求而得到的信息。
但是尝试使用后,发现另一个问题,我滚到到页面中间的某个地方,点击某一条进入详情页面,然后我点击返回回到这一页,虽然依然是之前的那些结构,但是没有滚动到我之前浏览的地方。
最终我的解决办法是进入详情页之前,在sessionStorage中临时保存一个浏览位置的信息,具体实现有一点小bug,之后再看看有没有更好的办法。
笔记-返回到前一个页面时显示前一个页面中ajax获取的数据相关推荐
- django 访问不到页面时显示404页面
1,修改主目录,settings.py文件 DEBUG = FalseALLOWED_HOSTS = ['*',] 2,在templates目录下放置404.html <!DOCTYPE htm ...
- 问题解决10使用带有框架的页面跳转到登录页面时,登录页面只显示在子框架中,未能铺满整个浏览器--解决方案如下:...
问题描述: 使用带有框架的页面跳转到登录页面时,登录页面只显示在子框架中,未能铺满整个浏览器,例如: 当登录信息过期时,点击左边的菜单栏会让登录页面显示在右边的框架中,而不能铺满整个浏览器 解决方案: ...
- php frameset不显示,如何解决php加载frameset页面时显示空白问题
如何解决php加载frameset页面时显示空白问题 发布时间:2020-06-09 11:46:54 来源:亿速云 阅读:113 作者:Leah 如何解决php加载frameset页面时显示空白问题 ...
- js文件加载显示状态码206,导致页面一直显示加载中
一.问题现象: 用户反馈平台一直显示加载中,无法登录平台,因没有其他用户反馈,且我方验证时可以打开平台,采用了如下方式均未解决问题: 1.换浏览器使用 2.清除浏览器缓存 3.咨询服务部署方是否对用户 ...
- 微信打开页面底部显示“原页面已由QQ浏览器云转码”解决办法
问题描述: 微信分享的页面底部显示"原页面已由QQ浏览器云转码",页面布局只显示文字,没有图片等css样式,点击右上角在浏览器中打开还是会转码,没有样式只有文字. 原因分析: 1. ...
- AngularJS学习笔记(3)——通过Ajax获取JSON数据
通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
- 使用ajax获取后台数据怎么打印,我用ajax获取后台数据并展示在前端页面的方法【源码】...
<我用ajax获取后台数据并展示在前端页面的方法[源码]>由会员分享,可在线阅读,更多相关<我用ajax获取后台数据并展示在前端页面的方法[源码](2页珍藏版)>请在人人文库网 ...
- vue 后台数据列表获取图片_vue使用ajax获取后台数据进行显示的示例
实例如下所示: title #th th{ background-color: #50a9fa; color: aliceblue; font-size: large; } 添加数据 编号 名称 时间 ...
- IE9浏览Flash页面时显示错位并不停地闪烁
之前,在一次开机进入系统后,弹出Flash Player安装新版本的窗口,我验证了是Adobe的数字签名后就执行了安装操作. 后来在使用IE9浏览带有Flash元素的页面时,其Flash元素显示都错位 ...
最新文章
- 绝对定位下margin的作用
- 注解处理器开发过程相关问题
- 史上最正确的achemy安装方法
- 【Sprint3冲刺之前】TD学生助手测试用例
- 分析模式 - 度量与测绘
- VTK:PolyData之GetPoint
- python初学代码留个纪念
- Groovy 1.5.7 出现java.lang.LinkageError问题
- jcmd,大约JDK 11
- xpath里面if判断一个值不为空_现代C++之模板元编程(今天写个If与While)
- wpf 代码获取contextmenu_wpf – 如何在动态创建的ContextMenu中添加水平分隔符?
- 计算机端口lpt,教你把USB、COM串口打印机映射到LPT端口
- 程序员的百宝箱:提升工作效率的七大神器
- Silvaco学习笔记(六)毕设相关
- Mask R-CNN 训练自己的数据集(balloon过程+报错解释)
- 2022 云栖大会 | 一体化大数据智能峰会预约开启
- 【PHP渗透技巧拓展】————3、LFI、RFI、PHP封装协议安全问题学习
- 为jupyter的Markdown标题生成大纲目录
- 矛与盾:用VB打造驱动级键盘记录器,能过QQ密码框(源码)
- stm32F4 定时器中断 + 步进电机控制器 控制四线两相步进电机 (初级版本)
热门文章
- CSS基础——盒子模型【学习笔记】
- Python零基础入门(零)——Anaconda安装(python安装)和使用
- go 遍历二维数组json_for-range造就循环永动机?快来看看go中for-range的那些事!
- cif t t操作流程图_Danish:STATA 操作正态检验、卡方检验和T检验
- BadZipfile: File is not a zip file
- Boost Graph
- android root点击事件,在Android中使用InputManagerService进行事件传递
- mysql.proc_修复./mysql/proc
- react 显示当前时间_React 灵魂 23 问,你能答对几个?
- mybatis都有哪些executor执行器_Mybatis的SqlSession创建过程详解