笔记-返回到前一个页面时显示前一个页面中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获取的数据的更多相关文章
- datagrid返回记录为0时显示“没有记录”
datagrid返回记录为0时显示“没有记录”,此问题的 <script>var myview = $.extend({},$.fn.datagrid.defaults.view,{ on ...
- 关闭open页面时刷新父页面列表
var winObjEI = window.open("/Invoice/InvoiceViewEI?invoiceid=" + data.InvoiceId); ; //关闭op ...
- 创建一个欢迎 cookie 利用用户在提示框中输入的数据创建一个 JavaScript Cookie,当该用户再次访问该页面时,根据 cookie 中的信息发出欢迎信息。
创建一个欢迎 cookie 利用用户在提示框中输入的数据创建一个 JavaScript Cookie,当该用户再次访问该页面时,根据 cookie 中的信息发出欢迎信息. <html> & ...
- AngularJS学习笔记(3)——通过Ajax获取JSON数据
通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
- 用ajax获取后台数据,返回json数据,怎么在前台使用?
用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...
- JS-利用ajax获取json数据,并传入页面生成动态tab
封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...
- Ajax获取接口数据,url拼接参数跳转页面,js获取上一级页面参数给本页面
1.Ajax获取接口数据 function demo(){ //假设请求参数 var requestBody = [{ "name":"zhang", &quo ...
- 页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.
一,引入三个文件 jQuery版本使用 jQuery v1.7.1 jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用jquery.blockui. ...
- jquery mobile 请求数据方法执行时显示加载中提示框
在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...
随机推荐
- 基于 Keras 的 LSTM 时间序列分析——以苹果股价预测为例
简介 时间序列简单的说就是各时间点上形成的数值序列,时间序列分析就是通过观察历史数据预测未来的值.预测未来股价走势是一个再好不过的例子了.在本文中,我们将看到如何在递归神经网络的帮助下执行时间序列分析 ...
- nginx: [emerg] getpwnam("nginx") failed
搭建LNMP环境的时候,在安装完Nginx后启动测试Nginx服务时发现报如下错误: nginx: [emerg] getpwnam("nginx") failed 这是由于没有创 ...
- Tomcat 在 Linux 上的安装和配置
一.文件上传 先上传tomcat安装文件到Linux服务器 二.解压安装 使用以下命令解压安装包 .tar.gz 解压成功会生成一个文件夹 tomcat服务器运行时是需要JDK支持的,所以必须先安装好 ...
- Windows系统CMD常用命令大全
命令简介 cmd是command的缩写.即命令行 . 虽然随着计算机产业的发展,Windows 操作系统的应用越来越广泛,DOS 面临着被淘汰的命运,但是因为它运行安全.稳定,有的用户还在使用,所以一 ...
- Strom
storm 实时分析概念 离线分析 通常是 需要一段时间的数据积累 积累到一定数量数据后 开始离线分析 无论数据量多大 离线分析 有开始 也有结束 最终得到 ...
- AB(ApacheBench)工具 -- 压力测试
服务器负载太大而影响程序效率也是很常见的,Apache服务器自带有一个叫AB(ApacheBench)的工具,可以对服务器进行负载测试 同时美多商城的秒杀功能也会被高负载影响,从而导致超卖现象 安装x ...
- postgresql-分页重复数据探索
# postgresql-分页重复数据探索 ## 问题背景 许多开发和测试人员都可能遇到过列表的数据翻下一页的时候显示了上一页的数据,也就是翻页会有重复的数据. ### 如何处理? 这个问题出现的原因 ...
- 转载 用Python实现设计模式——工厂模式
转载自 SegmentFault作者 夏秋, https://segmentfault.com/a/1190000013053013 非常感谢这位作者的深入浅出的讲解. 前言 工厂模式,顾名思义就是我 ...
- docker学习篇(一) ----入门篇
什么是docker docker自2013年诞生以来已有5年了,最初基于Google公司的go语言实现的,项目代码在GitHub上进行维护. 项目地址:https://github.com/moby/ ...
- 移动端 h5开发相关内容总结(三)
之前写过两篇开发中遇到的问题和解决方案.当时是CSS 和 JavaScript 分开写的.现在写这篇文章的时候感觉很多内容都是有内在联系的,所以不好分开. 给大家分享一下这半年来的感受吧: 知道和理解 ...