zoukankan      html  css  js  c++  java
  • 笔记-返回到前一个页面时显示前一个页面中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,之后再看看有没有更好的办法。

  • 相关阅读:
    Google Go语言推出第一个正式版本:Go 1
    前端开发工作感悟:具体的量化指标
    AIR SDK 更新方法
    HTML5 MediaStream的运用
    理解css中的长度单位
    快速提高 Vi/Vim 使用效率的原则与途径
    Saving the Day with Scoped CSS
    事件的发生顺序HTML5移动开发
    BigPipe学习研究
    构建合规的Web应用程序
  • 原文地址:https://www.cnblogs.com/zczhangcui/p/6900709.html
Copyright © 2011-2022 走看看