关山难越,谁悲失路之人;萍水相逢,尽是他乡之客。
百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程教程 > JavaScript > 正文

Java web 前端跨页面信息传递的几种方式(前端页面之间传递数据)

guanshanw 2023-03-12 22:01 409 浏览 8 评论

背景

一个简单的数据查询功能,列表页面有“查看详情”按钮,跳转详情页面时列表的一条记录信息需要传递到详情页面;而详情页面有“返回”按钮,返回的同时也需要将原列表的查询条件回显。

跳转方式直接是 window.location.href,一个典型的跨页面信息传递,属于不同页面之间共享信息的情况。那么跨页面共享信息的方式有哪些呢?本文将介绍三种方式。

URL参数传递

列表页面的查询参数,可以通过URL的方式传递到下一个详情页面,设置到隐藏表单域中;然后在详情页面返回时,将隐藏表单域中的信息一并拼接到url参数后面返回。

设置隐藏表单域有一个好处,查询条件对详情页面没有用,仅仅作为返回上一个页面时的条件回传,所以可以直接将隐藏表单信息直接拼接到url中,按钮事件如下:

/**
 * 返回按钮的事件
 */
function goBack(){
	//form表单隐藏域有上一个页面传递过来的参数
	var query = $("#hiddenForm").serialize();
	
	//返回到列表页面
	window.location.href="dataList.jsp?isBack=true&"+query;
}

cookie传递

对于js对象信息的传递,可先将对象序列化为json字符串,再通过document.cookie的方式写入cookie,然后在下一个页面解析cookie,转换为JSON对象处理。

上述需求中在跳转查看详情页面时,因为当前选中的记录信息已经查询出来了,到了详情页面可以直接使用而不再请求后台。处理方式如下:

第一步,将该条记录序列化后写入cookie中,再跳转。

var currentData = null;
var allDatas= new Array();
function showDetail(index){
	//将当前记录写入cookie
	currentData = allDatas[index];
	document.cookie = "currentData="+JSON.stringify(currentData);

	var url = detail.jsp?now=1";
	window.location.href = url;
}

第二步,跳转页面加载事件中解析cookie信息:

var currentData=null;
+function ($) {
	var strCookie = document.cookie;
	var arrCookie=strCookie.split("; ");
	for(var i=0;i<arrCookie.length;i++){
		var spliit=arrCookie[i].split("=");
		if(spliit[0]=='currentData'){
			currentData= $.parseJSON(spliit[1]);
			break;
		}
	}
	
	//解析完成后立即清理cookie
	document.cookie="currentData=";
}(jQuery);

cookie使用不当,可能会出现问题,主要体现在一个页面上如果存入cookie的信息过多,会出现请求头域过长,后台报异常的问题。

我的一个页面有三个列表,初始时所有需要传递的信息包含四五个JSON对象,在不清楚这些数据的总大小的情况下将所有需要传递的数据都序列化到cookie中,然后就出现头域超长问题了。

异常信息如下:

信息: Error parsing HTTP request header
Note: further occurrences of HTTP header parsing errors will be logged at DEBUG level.
java.lang.IllegalArgumentException: Request header is too large

此时超长的cookie信息如下(主要是几个序列化的大JS对象):

cookie 可以使用,只要注意一下只针对适当、必要的大对象通过cookie方式传递,而且在解析完后立即清理无用cookie信息;其他可以通过URL或者现场查询的方式获取的数据不用该方式传递,控制cookie信息的长度即可。

重发请求获取共享数据

最后一种,就是必要的重复查询。即使上一个页面已经查过一次数据了,但是当前页面还是需要发起相同的请求来获取数据。

可以这么理解:这些数据其实不是共享数据,只是相同请求、并且请求响应数据不会发生变化而已。

此时突然想到可以用Ehcache页面缓存框架,将这些亘古不变的请求缓存起来,那么页面重复请求也可以提升页面的响应效率的。

启示录

编程无止境、IT技术浩瀚、学海无涯的,个人知识太少的渺小感,编码时常自省:文档写的完美吗,脚本能不能写个程序自动化呢?


复制粘贴也是分境界的,低级的境界就是仅仅是复制粘贴了,至高的境界应该是这样的:复制之前看看代码结构,大致了解下这段代码的作用;粘贴之后检查下有没有需要修正的地方,代码格式有没有问题;jsp页面引用文件中有没有什么是当前页面不需要的,无关的变量能不能去掉?

如果是自己写的代码,应该看看有没有值得优化的地方,过去编码时有没有特别的想法;如果是别人的代码,更应该看看怎么回事了,别人的代码有什么值得借鉴的地方,有什么要改正的地方。

如果仅仅因为功能实现了,而结构糟糕的烂代码,重构一下又何妨?被我粘过来就是我参与的代码了,我有责任保证我提交的文件的优雅可读。

相关推荐

精品基于Uniapp+Springboot实现的Android的学习生活交流APP

《[含文档+PPT+源码等]精品基于Uniapp+Springboot实现的Android的学习生活交流APP[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程等软...

精品spring boot+MySQL婚纱影楼管理系统vue

《springboot+MySQL婚纱影楼管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等使用技术:操作系统:Windows10、Windows7、Windows...

从病毒到“基础软件污染”,Linux 真的安全吗?

长久以来,Linux主机曾一直被认为是比Windows更安全的操作系统,已知病毒形势远没有Windows多样和严重。而近年随着云计算的兴起,Linux系统在云主机的高占比形成了联网主机的主要算力,自然...

PHP代码审计入门之路(渗透测试补全篇)

0x01前言虽然市面上的代码审计的文章已经一大把了,但是还是决定重复造轮子,打算作为一个系列来写的,近年越来越多的安全研究人员投入到php应用的漏洞挖掘,相对应的代码安全问题也被大量的暴露出来,身处...

为什么很多人学习PHP编程都喜欢自学成才?推荐几个php自学网站

PHP编程语言是目前编程语言中最热门的编程之一,PHP应用领域最多的是WEB开发,PHP和mysql结合可以做出完美的网站,目前大多WEB网站都会选择PHP开发,开源成本低,高效质量好。学习PHP编程...

uniapp整个diygw-ui-php(thinkphp)跨域访问调试

diygw-ui-php开源地址:https://gitee.com/diygw/diygw-ui-phpNGINX修改配置,增加了跨域https请求保存后导出源码PHP环境支持断点调试。关键配置如下...

精品springboot的二手车管理系统vue

《springboot的二手车管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等使用技术:操作系统:Windows10、Windows7、Windows8开发语言:...

新手小白如何部署服务器,让你的个人电脑成为网站服务器

近期有粉丝问到从服务器部署到网站上线的细节操作流程要怎么办,本文进行相关的说明,由于方法很多,文本着重以小白比较容易入手的方式来进行介绍,同时文末会对如何将自己的电脑变成服务器进行简单的说明,便于小白...

SQL注入小白入门,大佬请绕道

SQL注入小白入门,大佬请绕道什么是SQL结构化查询语言(StructuredQueryLanguage)简称SQLSQL使我们有能力访问数据库什么是SQL注入用户提交的数据可以当作命令被数据库解...

PHP开发环境安装配置:Win10+Docker+Laradock(上篇)

一、关于PHP开发环境的选择1、操作系统的选择?PHP运行环境从操作系统上来说肯定是Linux最好,在生产环境的服务器中都是使用Linux系统。但是Linux日常使用软件不够丰富,只...

yii2-adminlte-asset / yii2-admin 安装配置

1.承接上一篇,安装一个靓的模板(yii2-adminlte-asset)AdminLTE。以及一个user图形化管理界面(yii2-admin)2.首先安装yii2-adminlte-asset...

windows如何实现定时任务?配合脚本使用结局很满意

序言:作为一名程序员,通过定时任务去实现各种所需的功能是必须要掌握的,本文来讲解一下在windows服务器上如何创建定时任务。有需要的小伙伴赶紧收藏转发吧。第一步:打开控制面板-》系统和安全-》管理工...

助你学安全,使用docker快速搭建各大漏洞学习平台

今天给大家分享一个docker安装的漏洞平台批量安装,vulstudy是专门收集当下流行的漏洞学习平台,并将其制作成docker镜像,方便大家快速搭建环境,节省搭建时间,专注于的漏洞学习上。目前vul...

「 靶场环境篇 」 phpstudy 集成环境安装教程(特别详细)

前言最近整理了一些奇安信&华为&深信服大佬的课件资料+大厂面试课题,想要的可以私信自取,无偿赠送给粉丝朋友~想入门渗透行业呢光有理论基础是不够的,更重要的是实践经验。我想着分享一些入门级靶场,从环境搭...

手把手教会你做音乐“网站”(二)

上一节的内容,归纳起来就是:下载软件,安装,启动。为了能让小白看明白,写了很多文字,但愿没把你看糊涂了。这一节我力求简单描述。请私信我,发03272,自动获取音乐网站源码。这是一个压缩包music...

已有8位网友发表了看法:

  • 编程导航站

    编程导航站  评论于 [2023-06-03 14:30:30]  回复

    javaweb怎么从一个页面传参到另一个页面

  • 编程导航站

    编程导航站  评论于 [2023-06-03 14:37:42]  回复

    javaweb项目怎么在多个页面进行传输数据

  • 编程导航站

    编程导航站  评论于 [2023-06-09 10:35:33]  回复

    java web页面传递参数到另一个页面处理

  • 编程导航站

    编程导航站  评论于 [2023-06-12 19:10:55]  回复

    javaweb中怎么将一个页面的参数带到另外一个页面

  • 编程导航站

    编程导航站  评论于 [2023-06-22 16:58:02]  回复

    java web 怎么将一个页面的数值传给其他页面

  • 编程导航站

    编程导航站  评论于 [2023-10-02 20:02:26]  回复

    前端将本网页的json数据传给另一个网页

取消回复欢迎 发表评论: