刷新页面后，数据保留在原页面方法(session信息共享，ajax局部刷新)

最新推荐文章于 2023-12-01 14:25:12 发布
原创 最新推荐文章于 2023-12-01 14:25:12 发布 · 6.2k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在Web开发中如何利用服务器端session机制存储和获取数据。具体包括后台如何根据ID查找对象并将其存入session，以及前台如何从session中读取这些数据。

网上总共有三种方法：

1.采用session作用域保存数据在服务器当中，但是服务器压力大(session信息共享)；

2.采用ajax局部



现在我们采用第一种：

后台:

根据库来查找对象(通过id)

找到对象，将对象直接塞进session中

session.setAttribute("自定义名", 对象);


前台调用：

${自定义名.属性}  那就可以了


再用$('#标签名').val('session.setAttribute("dt", dzdt);');


一文带你实现刷新页面数据不丢失(操作状态保留)效果
izl040905的博客
11-07 9280
页面刷新后对数据的操作状态进行保留，也就是页面刷新数据不丢失效果，是我们对前端项目开发中一个算是比较基本的效果了。其实实现的话也是很简单的，今天就来带你一文彻底弄懂此效果的实现。
Java面试题-2021
影修
11-30 3894
Java面试题1、MyCat1.什么是数据库分片2.MyCat的作用?3.MyCat和MySQL的区别?4.什么是分库分表?5.如何设计分库分表 (mycat)2、MongoDB1.MongoDB的作用2.MongoDB的特点3、动态代理4、MySql1.优化SQL的步骤(创建索引)2.避免索引失效和SQL优化3.索引的分类3.4.1 按属性3.4.2 按数据存储方式3.5.2 查看索引3.5.3 删除索引4.索引设计原则2.索引的结构索引结构Hash 索引和 B+ 树索引区别是什么？3.MySQL的存储引
刷新当前页面，保持原有数据
juyuquan1986的专栏
09-24 1594
  location.replace(location)
ajax写法_JavaEE之Ajax第一课
weixin_39895167的博客
11-27 162
【AJAX】一 AJAX引入1.1认识同步交互和异步交互1.1.1什么是同步交互 首先用户向HTTP服务器提交一个处理请求。接着服务器端接收到请求后，按照预先编写好的程序中的业务逻辑进行处理，比如和数据库服务器进行数据信息交换。最后，服务器对请求进行响应，将结果返回给客户端，返回一个HTML在浏览器中显示，通常会有CSS样式丰富页面的显示效果。优点 可以保留浏览器后退按钮的...
刷新页面仍保留当前数据显示
weixin_44208883的博客
10-06 5748
刷新页面仍保留当前数据显示 背景：若当前该页面有数据（有任务），要求刷新保留当前的数据（任务）；关闭当前会话（页面）或完成任务后则把当前任务结束（清空），页面为空数据页。 保留数据一般用的四种方法： 1. localstorage 保存数据，长期有效直到过期（设置了过期时间） localStorage.setItem(keyname, value); //key and value should be string. localStorage.getItem(keyname); 2. sessionS
用js来刷新当前页面保留参数的具体实现
10-26
本文为大家详细介绍下如何使用js来刷新当前页面保留参数，下面有个不错的实现大家可以看看
为什么要用sessionStorage存储
最新发布
10-10
// 或通过Ajax局部刷新用户区域 $.get('/api/user', function(data) { $('#header').replaceWith(data.header); }); } }); ``` ### 注意事项 1. **隐私安全**：避免在sessionStorage存储密码等敏感信息（引用...
2022Java经典面试题总结(附问题和答案)
AlanChen的博客
05-20 4224
 Java基础  面向对象 封装：封装的意义，在于明确标识出允许外部使用的所有成员函数和数据项，内部细节对外部调用透明，外部调用无需修改或者关心内部实现 继承：继承基类的方法，并做出自己的改变和/或扩展，子类共性的方法或者属性直接使用父类的，而不需要自己再定义，只需扩展自己个性化的 多态：基于对象所属类的不同，外部对同一个方法的调用，实际执行的逻辑不同  JDK、JRE、JVM之间的区别 JDK：Java Develpment Kit java 开发工具 JRE：Java Runt
最全面、最详细web前端面试题及答案总结
热门推荐
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
Ajax将数据发送到后台进行局部刷新操作
10-24
Ajax将数据发送到后台进行局部刷新操作，将前台数据用js脚本发送给后台，后台处理后返回结果
ajax局部刷新实例 (三种方法推荐)
10-20
下面小编就为大家带来一篇ajax局部刷新实例 (三种方法推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery实现Ajax定时局部页面刷新
01-16
能够实现页面局部刷新，及时掌握最新消息，例如小型的聊天功能
ajax实现了一个页面数据的局部刷新
05-22
本文档利用ajax实现了一个页面数据的局部刷新。
Ajax定时刷新局部页面
12-20
Ajax定时刷新页面，定时刷新局部页面，Ajax局部刷新技术，主要运用的在即时通讯等...
vue2+若依+页面切换刷新回来后保留数据
weixin_43961652的博客
12-23 7526
如题 现有两个页面，接单页面和订单详情页面。接单页面有一个查询弹窗。 1、默认将客服设置成当前登录的人员，并只展示出该客服负责的订单 2、重新设置了搜索条件，进入订单详情页面再回来，页面会刷新，搜索条件也会被重置，希望不要重置搜索条件而是进行保留 讲道理，昨天第一个需求提出来的时候我可以把它给实现了，第二个需求提出来的时候我愣是傻了，单以为只要切换页面就必定会刷新页面，搜索条件必重置，做不了 今天上午来，又看了一遍需求，突然想到为什么我第一个需求可以用vuex写出来，第二个为啥不能...
AJAX：实现局部刷新
qq_43568982的博客
09-06 7012
开始时间：2021-09-04 AJax
利用jQuery实现AJAX定时刷新局部页面实例
12-01 1962
通过两种方法实例讲解ajax定时刷新局部页面，当然方法有很多种，也可以不使用ajax来刷新页面，可以使用jquery中的append来给指定内容加东西，但是都不太实用，最实用的方法还是ajax加载数据了。局部刷新我们讲述到最多的是ajax 了，当然也可以不使用ajax来刷新页面了，我们可以使用jquery中的append来给指定内容加东西了，当然最实用的还是ajax加载数据了。如果我只能刷新一个特定的页面的一部分，这将是很大的，例如：仪表盘上的交通灯显示系统状态。
AJAX局部刷新功能实现
just_learing的博客
04-16 3260
Ajax局部刷新功能实现
点击下一页后覆盖原页面而非在原页面下方刷新
07-17
要实现点击下一页后覆盖原页面数据（而非追加）的效果，需要修改分页逻辑中的数据合并方式。以下是修改后的关键代码部分： ```javascript // 修改 fetchApprovalList 方法中的数据合并逻辑 fetchApprovalList() { this.loading = true; const approvalData = { pageNum: this.pageNum, pageSize: this.pageSize, approval: { remark: '', id: 0, approvalType: 0, startTime: '', endTime: '' } }; approval_getList(approvalData).then(response => { this.total = response.total || 0; const newData = response.rows || []; // 关键修改：直接覆盖数据而不是追加 this.approvalList = newData; // 判断是否还有更多数据（用于显示提示） this.noMoreData = (newData.length < this.pageSize) || (this.pageNum * this.pageSize >= this.total); }).catch(error => { console.error('获取审批列表失败:', error); uni.showToast({ title: '加载失败', icon: 'none' }); }).finally(() => { this.loading = false; }); } ``` ### 完整实现说明： 1. **数据覆盖而非追加**： - 将 `this.approvalList = [...this.approvalList, ...newData]` - 改为 `this.approvalList = newData` 2. **分页组件调整**： ```html <uni-pagination :show-icon="true" :current="pageNum" :total="total" :pageSize="pageSize" title="审批分页" @change="handlePageChange" /> ``` 3. **滚动到顶部**（可选增强体验）： ```javascript handlePageChange(e) { this.pageNum = e.current; // 添加返回顶部逻辑 uni.pageScrollTo({ scrollTop: 0, duration: 300 }); this.fetchApprovalList(); } ``` 4. **加载状态优化**： ```javascript data() { return { // 添加独立加载状态 pageLoading: false } } // 在方法中使用 fetchApprovalList() { this.pageLoading = true; // ...其他代码 }.finally(() => { this.pageLoading = false; }); ``` ### 为什么这样修改： - 原追加模式 (`[...old, ...new]`) 适合无限滚动 - 覆盖模式 (`= newData`) 适合传统分页，每次翻页都重新加载当前页数据 - 避免了数据重复问题 - 更符合"下一页覆盖当前页"的预期行为 ### 注意事项： 1. 确保后端接口支持 `pageNum` 和 `pageSize` 参数 2. 如果使用下拉刷新，需要重置页码： ```javascript onPullDownRefresh() { this.pageNum = 1; this.fetchApprovalList().finally(() => { uni.stopPullDownRefresh(); }); } ``` 3. 考虑添加加载动画提升用户体验 这样修改后，每次点击分页组件切换页码时，都会用新数据完全替换当前列表内容，而不是在现有数据后追加新数据。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值