简单知识——跨页面信息传递

原创 2017年08月26日 08:19:47

背景

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

跳转方式直接是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页面引用文件中有没有什么是当前页面不需要的,无关的变量能不能去掉?

如果是自己写的代码,应该看看有没有值得优化的地方,过去编码时有没有特别的想法;如果是别人的代码,更应该看看怎么回事了,别人的代码有什么值得借鉴的地方,有什么要改正的地方。如果仅仅因为功能实现了,而结构糟糕的烂代码,重构一下又何妨?被我粘过来就是我参与的代码了,我有责任保证我提交的文件的优雅可读。

哈哈,像我这么单纯的技术人员,哪位网友的单位好,推荐一下把我收了吧!

版权声明:本文为博主原创文章,未经博主允许不得转载。

跨页面的传送小例子

  • 2007年10月20日 21:51
  • 3KB
  • 下载

如何使用js来实现通过href完成多个html页面之间的传递参数

有些时候我们需要在一连串的网站跳转中都要使用某些参数值,那么楼主分享的是:在不使用php和数据库的情况下,如何通过简单的js代码来实现多个网站之间的数值传递。(适合html+js菜鸟参考,高手勿喷~o...
  • u013319480
  • u013319480
  • 2016年09月20日 14:41
  • 379

Web程序中网页间数据传递方法小结

Response.Redirect  让我们首先看一看如何使用Response.Redirect方法传递数据。这是它们之中最简单的方法。在文本框中输入一些数据,并且当你输入完成数据后,按下“Respo...
  • doublewang
  • doublewang
  • 2006年04月12日 18:17
  • 679

mui不同界面之间的信息传递

问题描述点击A页面,需要改变B页面中的一个js变量值问题解决A页面中var target = plus.webview.getWebviewById('data.html'); target.eval...
  • u013720726
  • u013720726
  • 2017年10月19日 11:04
  • 120

SESSION无法跨页传递问题

问题来源 : 很早就搭建了个Lnmp环境,想把之前在Windows上开发的PHP项目迁移到Linux上,结果发现无法登陆,检查了下PHP连接Mysql是没有问题的,往下走,发现是SESSION无法跨页...
  • u014646984
  • u014646984
  • 2015年04月03日 23:00
  • 2037

SESSION跨页传递问题

首先,我们要了解,在什么状态下SESSION中的会话变量不能跨页传递。情况有三:①客户端禁用了COOKIE;②在php.ini中设置了session.use_trans_sid=0或者在编译前没有开启...
  • fff058
  • fff058
  • 2016年01月17日 19:45
  • 768

怎么把一个页面的数据传到另一个页面?

resquest.querystring--用于session--本应用程序内用。application--所有启动应用程序的公用。 cookies--把东东写客户端cache--局部的应用程序不想为...
  • bopo00
  • bopo00
  • 2004年10月26日 20:35
  • 2783

跨页面数据发送

跨页面数据发送:如果你需要多个页面发送数据到同一个表单程序进行处理,或者数据在多个页面之间传输处理的话,你就可以使用ASP.NET 2.0这个新特性。例如,我打算把Default.aspx页里Text...
  • fanhgye
  • fanhgye
  • 2008年04月07日 16:55
  • 457

H5PostMessages实现跨页面通信

效果图postMessagesHTML5提供了新型机制PostMessage实现安全的跨源通信.语法otherWindow.postMessage(message, targetOrigin, [tr...
  • c_kite
  • c_kite
  • 2017年11月17日 20:58
  • 162

PHP的SESSION跨页面传递丢失的问题

PHP的SESSION跨页面传递丢失的问题近来有网友问我PHP的SESSION跨页面传递丢失的问题。在这里总结一下PHP的SESSION跨页面传递问题的解决方案。注意我们下面涉及到的配置均位于PHP....
  • samxx8
  • samxx8
  • 2011年07月01日 10:14
  • 1731
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:简单知识——跨页面信息传递
举报原因:
原因补充:

(最多只允许输入30个字)