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

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

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

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

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

相关文章推荐

JavaScript对于Form的序列化和填充数据

1、html页面代码 用户名: 密码: 2、关于JavaScript对于Form的序列化和填充数据的封装 var util = { serializ...

自动装配引起的Spring注入错误

当XML文件中添加了default-autowire="byName"时,会自动为属性注入同名的bean实例,即使为该属性显式指定了一个ref也不生效。 ...

用curl模拟登陆获取页面信息以及相关知识点

今天使用curl做了模拟登陆,之前没有接触过curl,也并不知道有这个东西,下面简要谈谈我在做这个模拟登陆过程中get 到的技能以及了解到的知识:      1、CURL:curl是利用URL语法...
  • v587_lu
  • v587_lu
  • 2016年01月11日 16:33
  • 1673

GitHub入门:各种概念、图解页面信息(都是知识点啊小伙伴们)

原创文章,转载请注明出处:http://blog.csdn.net/android_zyf/article/details/64122889Mac版GitHub下载地址(需要梯子):https://m...

python简单爬取页面信息及实现打开、关闭浏览器

python简单爬取页面信息及实现打开、关闭浏览器

把玩之糗事百科简单页面信息爬虫

原文链接:静觅 » Python爬虫实战一之爬取糗事百科段子 这个例子是对糗事百科的简单页面爬虫,但是由于糗事百科已经改版,或许运行不成功,主要是为了学习下爬虫完整过程。后序会有改正:请等待。。...

Python3抓取页面信息,网络编程,简单发送QQ邮件

数据收集,数据整理,数据描述,数据分析# coding=utf-8 import sys import urllib.requestreq = urllib.request.Request('http...
  • wqewq19
  • wqewq19
  • 2016年11月15日 17:06
  • 481

简单的 利用 parser 获取页面信息

这其实是  要入库  所以 放在了 service层里 还传入了 service对象 因为 好像 spring 不能注入线程里 而且 control里 开了线程 去 获取页面信息 所以传入了 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:简单知识——跨页面信息传递
举报原因:
原因补充:

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