笔记第一部分: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获取的数据的更多相关文章

  1. datagrid返回记录为0时显示“没有记录”

    datagrid返回记录为0时显示“没有记录”,此问题的 <script>var myview = $.extend({},$.fn.datagrid.defaults.view,{ on ...

  2. 关闭open页面时刷新父页面列表

    var winObjEI = window.open("/Invoice/InvoiceViewEI?invoiceid=" + data.InvoiceId); ; //关闭op ...

  3. 创建一个欢迎 cookie 利用用户在提示框中输入的数据创建一个 JavaScript Cookie,当该用户再次访问该页面时,根据 cookie 中的信息发出欢迎信息。

    创建一个欢迎 cookie 利用用户在提示框中输入的数据创建一个 JavaScript Cookie,当该用户再次访问该页面时,根据 cookie 中的信息发出欢迎信息. <html> & ...

  4. AngularJS学习笔记(3)——通过Ajax获取JSON数据

    通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...

  5. 用ajax获取后台数据,返回json数据,怎么在前台使用?

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

  6. JS-利用ajax获取json数据,并传入页面生成动态tab

    封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...

  7. Ajax获取接口数据,url拼接参数跳转页面,js获取上一级页面参数给本页面

    1.Ajax获取接口数据 function demo(){ //假设请求参数 var requestBody = [{ "name":"zhang", &quo ...

  8. 页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.

    一,引入三个文件 jQuery版本使用 jQuery v1.7.1 jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用jquery.blockui. ...

  9. jquery mobile 请求数据方法执行时显示加载中提示框

    在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...

随机推荐

  1. SDWebImage之工具类

    SDWebImage使用了很多工具类来对图片的处理,比如获取图片类型.图片放大缩小.GIF图片处理.图片解压缩处理等.下面我们来看一下这几个工具类. 1.NSData+ImageContentType ...

  2. Android开发 - Retrofit 2 使用自签名的HTTPS证书进行API请求

    为了确保数据传输的安全,现在越来越多的应用使用Https的方式来进行数据传输,使用https有很多有点,比如: HTTPS协议是由SSL+HTTP协议构建的可进行加密传输.身份认证的网络协议,要比ht ...

  3. 「NOI2018」屠龙勇士(EXCRT)

    「NOI2018」屠龙勇士(EXCRT) 终于把传说中 \(NOI2018D2\) 的签到题写掉了... 开始我还没读懂题目...而且这题细节巨麻烦...(可能对我而言) 首先我们要转换一下,每次的 ...

  4. 使用 Navicate 连接 Oracle9i 数据库

    Navicat Premium 是一个可多重连接的数据库管理工具,它可让你以单一程序同時连接到 MySQL.SQLite.Oracle 及 PostgreSQL 数据库,让管理不同类型的数据库更加方便 ...

  5. 学习Python语言 基础语法:变量的基本使用

    Python变量 程序是用来处理数据的,变量就是用来保存数据的,通过给数据定义一个名称来保证方便记忆和识别.使用这个数据.变量可以保存所有类型的数据. Python变量的定义 在Python中,变量的 ...

  6. MySQL:字符串字段加索引

    1. 使用方式 1.1 全字段加索引 给整个字段加索引,索引存储整个字段的值. 数据量较小时,查询成本高,准确度高: 数据量较大时,比较耗费空间: 1.2 前缀索引 MySQL支持前缀索引,可以定义字 ...

  7. IDEA搭建SSM实现登录、注册,数据增删改查功能

     本博文的源代码:百度云盘/java/java实例/SSM实例/SSM实现登录注册,增删改查/IDEA搭建SSM实现登录,注册,增删改查功能.zip 搭建空的Maven项目 使用Intellij id ...

  8. 使用diskpart命令格式化U盘

    在安装各种linux系统时,经常要使用SD卡,这里就出了个问题,就是SD卡被linux格式化之后无法在widdows下使用. 并且windows下的格式化按键对它毫无作用.笔者在摸索的过程中,找到了格 ...

  9. .NET手记-Autofac进阶(传递注册参数 Passing Parameters to Register)

    当你注册组件时,可以为组件服务传入一系列参数,用于服务解析时使用. 可使用的参数类型 Available Parameter Types Autofac提供了集中参数匹配类别: NamedParame ...

  10. Java语言访问Redis数据库之Set篇

    如果想通过Java语言对Redis数据库进行访问. 首先,需要安装Redis数据库,可以是Windows系统,或者Linux系统.(本文以Windows系统的本地Redis数据库为例,代码说明如何操作 ...