欢迎光临我的博客--王小王的小站

前端页面之间传递数据

在前端多页面开发过程中,会经常在页面与页面中间跳转,在跳转过程中,总有些数据是要传递的,当然我们可以用locationStorage 对象来存储,也可以自己生成对象,下挂window对象来传递,这些本次暂不讨论。

我们讨论用URL来传递数据的情况:

假设A页面要跳转到B页面,这个过程中要传递一个简单的JSON对象类型:

Student={name:"wsp",age:"24"}

浏览器时不支持传递Object对象的,只支持String 类型的数据,故我们要对这个JSON对象进行序列化:使用 JSON.stringify方法

StriStu=JSON.stringify(Student);

序列化之后就可以进行跳转链接了:

location="b.html?Student="+StriStu

但是这个时候会发现浏览器URL是这样显示的:

b.html?Student={"name":"wsp","age":"24"}

这样显然是我们不希望的:因为如果有中文字符,浏览器会对字符进行编码,这样我们在b.html就解析不出了,而且这样看起来很不专业,那么我们就要在传递数据前,先对数据进行编码,这时采用window.encodeURIComponent 来进行编码,之后进行传递:

location="b.html?Student="+window.encodeURIComponent(StriStu)

浏览器地址栏显示如下:

b.html?Student=%7B"name"%3A"wsp"%2C"age"%3A"24"%7D

至此看起来已经是一个看起来比较专业的url了。

下面到了B页面解析部分了:

要获取对象,即可以用 location.serach 来获取传递值,当然我们要进行解密,解编码用相反的方法:decodeURIComponent,下面进行解析:

var Student=decodeURIComponent(location.search.slice(1).split("=")[1])

现在就可以还原原来的对象了,可以在新页面使用了。

 

posted on 2016-05-05 17:28  视频  阅读(2640)  评论(0编辑  收藏  举报