history保存列表页ajax请求的状态使用示例详解

目录
  • 问题
    • 优化前代码
  • history
    • history.pushState()
    • window.onpopstate
  • 问题2

问题

最近碰到两个问题：

  • 从首页进入列表页之后，点击下一页的时候，使用ajax请求更新数据， 然后点击浏览器“后退”按钮就直接返回到首页，实际这里想要的效果是返回列表页上一页。
  • 在列表页分页为2的页面进入详情页，然后点击“后退”按钮，返回的事列表页分页为1的页面。没法记住之前分页状态。

优化前代码

代码如下，在页数变化的时候，去异步请求数据，渲染页面。

const currentChange = (currentPage) => {
    ajax(`请求地址/${currentPage}`)
    .then(renderPage)
}

history

经过几番搜索，发现可以用History 接口来实现我们想要功能。

history.pushState()

按指定的名称和URL（如果提供该参数）将数据push进会话历史栈，数据被DOM进行不透明处理；你可以指定任何可以被序列化的javascript对象。具体描述可以参考文档

通过history.pushState(state, title, url)可以修改会话历史栈，把我们需要保存的数据存到state中，这里我们存入一个对象，属性为当前页数；title一般没什么用，这里传入null；url会修改当前历史纪录的地址，浏览器在调用pushState()方法后不会去加载这个URL

假设当前currentPage为1，当前url为www.example.com/search/index

...
const pushState = () => {
    const url = `/search/index/${currentPage}`
    history.push({
        page: currentPage
    }, null, url)
}
const currentChange = (currentPage) => {
    ajax(`请求地址/${currentPage}`)
    .then(res =>{
        pushState(currentPage)
        renderPage()
    })
}
...

现在代码执行顺序是：页数改变 => ajax请求 => pushState => renderPage()

在pushState之后当前url变成www.example.com/search/index/1

window.onpopstate

现在我们通过history.pushState()方法把状态存入历史会话中了，接下来就要监听window.onpopstate事件

参考mdn文档window.onpopstate

每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发.

调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).

接下来监听这个事件

window.addEventListener("popstate", (event) => {
	if(event.state !== null){
	    page = event.state.page
	    changeCurrentPage(page) // 修改当前页数
	}
})

当popstate触发时，会修改当前页数，然后触发之前定义的currentChange方法，更新数据，渲染页面。

问题2

到此为止，问题1就解决了。

接下来要解决问题二：从详情页返回列表页，记住之前的状态
这里我用url来记录状态，之前pushState推入的url就派上用场了。 只要把进入页面首次请求的地址改成当前url就可以了

假设之前push的url为www.example.com/search/index/5，从详情页返回之后url还会显示www.example.com/search/index/5

mounted () {
    ajax(location.href)
}

这样就完成了。 当然如果你的状态比较复杂，可以把数据存入本地Storage，添加一些判断即可

以上就是history保存列表页ajax请求的状态使用示例详解的详细内容，更多关于history保存列表页ajax请求状态的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JavaScript的History API使搜索引擎抓取AJAX内容

    JavaScript的History API使搜索引擎抓取AJAX内容

    大家在浏览Facebook的相册时有没有发现,页面局部刷新的同时地址栏的地址也改变了,而且不是hash的方式.它使用的就是HTML5 history新增的几个API,作为window的一个全局变量,在HTML4的时代history已不是什么新鲜的事物了.我们经常使用的就有 history.back()以及history.go() . 我一直以为没有办法做到,直到前两天看到了Discourse创始人之一的Robin Ward的解决方法,不禁拍案叫绝. Discourse是一个论坛程序,严重依赖Aj

  • Vue中如何把hash模式改为history模式

    Vue中如何把hash模式改为history模式

    目录 把hash模式改为history模式 关于路由hash和history模式 hash模式 history 模式 二者对比 把hash模式改为history模式 如上图所示非常简单 只需要在文件router下的index.js里加上一个mode:'history’即可把hash模式改为history模式.这个时候url上面的#号就不会再存在了,这样就把url成功把hash模式改成history了 关于路由hash和history模式 hash模式 hash 就是指 url 后的 # 号以及后

  • 通过history解决ajax不支持前进/后退/刷新的问题

    通过history解决ajax不支持前进/后退/刷新的问题

    前言: 现在前后端基本都是通过ajax实现前后端接口数据的交互,但是,ajax有个小小的劣势,即:不支持浏览器"后退"和"前进"键. 但是,现在我们可以通过H5的histroy属性 解决ajax在交互请求的这个小bug. 事件描述: H5增加了一个事件window.onpopstate,当用户点击那两个按钮就会触 发这个事件.但是光检测到这个事件是不够的,还得能够传些参数,也就是说返回到之前那个页面的时候得知道那个页面的pageIndex.通过 history的pu

  • vue3中关于路由hash与History的设置

    目录 关于路由hash与History的设置 1.history 关键字:createWebHistory 2.hash 关键字:createWebHashHistory 路由中hash和history模式区别 1.hash模式 2.history模式 3.两者对比 关于路由hash与History的设置 1.history 关键字:createWebHistory import { createRouter, createWebHistory } from 'vue-router' const

  • 基于h5的history改善ajax列表请求体验

    基于h5的history改善ajax列表请求体验

    信息比较丰富的网站通常会以分页显示,在点"下一页"时,很多网站都采用了动态请求的方式,避免页面刷新.虽然大家都是ajax,但是从一些小的细节还是 可以区分优劣.一个小的细节是能否支持浏览器"后退"和"前进"键.本文讨论两种方法,让浏览器可以后退和前进,或者说让ajax就像重定向到新页面一样 拥有能够返回到上一页或者前进到下一页. 数据实现分页显示,最简单的做法是在网址后面加多个page的当数,点"下一页"时,让网页重定向到pa

  • vue history模式刷新404原因及解决方法

    目录 项目场景: 问题描述 原因分析: 第一步 第二步 总结 项目场景: 提示:这里简述项目相关背景: vue项目路由history模式 问题描述 提示:这里描述项目中遇到的问题: vue history模式刷新404原因 原因分析: 因为在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404 解决方案

  • history保存列表页ajax请求的状态使用示例详解

    目录 问题 优化前代码 history history.pushState() window.onpopstate 问题2 问题 最近碰到两个问题: 从首页进入列表页之后,点击下一页的时候,使用ajax请求更新数据, 然后点击浏览器“后退”按钮就直接返回到首页,实际这里想要的效果是返回列表页上一页. 在列表页分页为2的页面进入详情页,然后点击“后退”按钮,返回的事列表页分页为1的页面.没法记住之前分页状态. 优化前代码 代码如下,在页数变化的时候,去异步请求数据,渲染页面. const curr

  • JavaScript中的ajax功能的概念和示例详解

    AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML). 个人理解:ajax就是无刷新提交,然后得到返回内容. 对应的不使用ajax时的传统网页如果需要更新内容(或用php做处理时),必须重载整个网页页面. 示例: html代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

  • 在Android环境下WebView中拦截所有请求并替换URL示例详解

    需求背景 接到这样一个需求,需要在 WebView 的所有网络请求中,在请求的url中,加上一个xxx=1的标志位. 例如 http://www.baidu.com 加上标志位就变成了 http://www.baidu.com?xxx=1 寻找解决方案 从 Android API 11 (3.0) 开始,WebView 开始在 WebViewClient 内提供了这样一条 API ,如下: public WebResourceResponse shouldInterceptRequest(Web

  • Python列表的深复制和浅复制示例详解

    Python列表的深复制和浅复制示例详解

    一.深复制与浅复制 列表是Python中自带的一种数据结构,在使用列表时,拷贝操作不可避免,下面简单讨论一下列表的深复制(拷贝)与浅复制 首先看代码: l1 = [5, 4, 3, 2, 1] # 用两种方法实现对列表l1的拷贝 l2 = l1 l3 = l1[:] print(l1) # [5, 4, 3, 2, 1] print(l2) # [5, 4, 3, 2, 1] print(l3) # [5, 4, 3, 2, 1] #修改l1 l1[0] = 9 print(l1) # [9,

  • 快速解决ajax请求出错状态码为0的问题

    快速解决ajax请求出错状态码为0的问题

    今天在使用 ajax 向后台请求数据时出现错误,提示状态码为 0 ,后台采用的是 spring mvc 架构. 状态码为0是什么意思呢?查找了下,原来它意味着 (未初始化)即没有调用到send()方法,我原来代码如下 : $.ajax({ url:"test", type:"post", data:{ blogTitle : $("#form1 input").val(), blogType : $("#form1 option:sel

  • AJAX页面状态保持思路详解

    传统的页面,浏览器通过url访问页面,页面的内容由后台服务生成页面所有内容再发回给浏览器渲染展示.到AJAX流行的时候,很多信息为AJAX异步请求,比如:点击.翻页等.通常这种情况你一刷新浏览器,当前页面就会重置到初始状态.更不用说把看到的信息url发给好友了. 传统的状态保存在地址栏,如: www.abc.com/search?s=abc&id=23&page=3 如果通过这种方式的话,浏览器会刷新页面,如果使用锚点的话则不会刷新浏览器.具体是点击页面去请求数据的同时会改变地址栏&quo

  • uni-app微信小程序登录并使用vuex存储登录状态的思路详解

    微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的

  • vuex管理状态仓库使用详解

    一.什么是Vuex?  Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能.采用了全局单例模式,将组件的共享状态抽离出来管理,使得组件树中每一个位置都可以获取共享的状态或者触发行为.  那么什么是状态呢?我把状态理解为在没有使用vu

  • Java struts2请求源码分析案例详解

    Java struts2请求源码分析案例详解

    Struts2是Struts社区和WebWork社区的共同成果,我们甚至可以说,Struts2是WebWork的升级版,他采用的正是WebWork的核心,所以,Struts2并不是一个不成熟的产品,相反,构建在WebWork基础之上的Struts2是一个运行稳定.性能优异.设计成熟的WEB框架. 我这里的struts2源码是从官网下载的一个最新的struts-2.3.15.1-src.zip,将其解压即可.里面的目录页文件非常的多,我们只需要定位到struts-2.3.15.1\src\core

  • validate 注册页的表单数据校验实现详解

    validate 注册页的表单数据校验实现详解

    目录 1.注册页是什么 2.为什么需要注册页 3.注册页如何实现 3.1分析业务需求 3.2获取数据 v-model双向绑定 3.3校验数据 3.4method中的发送数据 3.5处理数据 4总结 1.注册页是什么 当我们使用一个从未使用过的网站时,想要注册账号,点击注册账号时看到的网页就是注册页注册页例子如下: 我们看到以下的注册页中,有两大类信息: 第一大类是用户信息类, 包括用户名,密码和email,他们都有自己的 取值规则 ,例如用户名显示不得小于3个字符 第二大类是验证码类,一般有两种

随机推荐