html 页间传送数据,js 不同页面间传递值并取值,html不同页面间数据传递
以前没用到过页面间传递参数再从后台获取数据,自己总结了一些。
先说需求:现在有页面pageA.html 和页面pageB.html,页面pageA.html中有一事件,当这个事件触发时会打开页面pageB.html。而且页面pageB.html中的一些内容需要根据pageA.html 中的一些值来判断显示哪些内容或者做一些操作。
方法一:
(1) pageA.html 中的事件为 window.open('pageB.html')或者href="pageB.html"。
(2)我们把要传递的值加到要打开页面的地址后面:window.open('pageB.html?name&code&....')。
其中name、code等就是要传递的值。&是为便于取多个值而加的分隔符,用'-'、'|'等符号也行,下面会在用到的时候说明其作用(不加也行)。
(3)使用 window.location.search()方法获取地址栏要传递的参数。得到"?name&code"。可以把其赋给一个变量:var perimeters = window.location.search;
(4)因为'?'也会被取到所以要用perimeters.substr(1)取到'?'之后的值。
(5)再把取到的值分割成包含一个一个值的数组,用perimeters.substr(1).split('&'),split('&')的作用就是以'&'为标记,把字符串分割成字符串数组。这里面'&'的作用就凸现出来了。
(6)到这里基本上就能得到想要的值了。不过还会遇到一个问题,如果值是字母、数字显示是正常的,可如果传递的值是汉字就会出现乱码。这里就要用到decodeURI()方法来转换一下,就像:
decodeURI(perimeters.substr(1).split('&')[0]);就OK了。
window.open('pageB.html?name&code&....')
在pageB.html中
var perimeters = window.location.search;
perimeters = decodeURI(perimeters.substr(1).split('&')[0]);
方法二:
方法一的缺点是当有一个以上的值需要传递的时候,需要准确记录每个值的位置。而本方法是以名称值对的方式传递,比较友好。
从地址栏获取参数,name(类型string)为要获取的参数名
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)") ,// 构造一个含有目标参数的正则表达式对象
r = window.location.search.substr(1).match(reg); // 匹配目标参数
if (r != null) return decodeURI(r[2]); // 返回参数值
return null; // 如果不存在,返回null
}
例:pageB.html ? name = xiaocao & code=xiaocao0001
console.log(getUrlParam('name')) // 输出 'xiaocao'
console.log(getUrlParam('code')) // 输出 'xiaocao0001'
方法三:localStorage或者sessionStorage本地缓存
地址栏传参容易被修改,也不安全,可以用localStorage或者sessionStorage
例:
设置:localStorage.setItem('obj', JSON.stringify({ name: 'xiaocao', code: 'xiaocao0001' }));
取出:var obj = JSON.parse(localStorage.getItem('obj')); // obj = {name:'xiaocao',code:'xiaocao0001'}
本地存取的方法要记得用过之后清除缓存(localStorage.removeItem('obj'); ),避免不必要的错误。
sessionStorage类似,区别在于存储在 sessionStorage 里面的数据在页面会话结束时会被清除
以上三种方法各有优缺点,可根据具体情况选用
html 页间传送数据,js 不同页面间传递值并取值,html不同页面间数据传递相关推荐
- 【java】在jsp的js和css里面使用EL表达式取值|style里面用$取值
众所周知,如果直接在jsp的js或者css语句块里面写${***}取值的话,程序会不识别这玩意,但是,我们有时候确实需要动态取值,比如,js为了获得对象的某一个值,不方便用js的getElementB ...
- Maven和Spring mvc下的页面的跳转与取值
(此处tomcat的端口设置为80) 例如:在testForm.jsp里提交表单,在ok.jsp里取值 testForm.jsp页面代码如下: <%@ page contentType=&quo ...
- js jquery给input标签赋值、取值
js jquery给input标签赋值.取值 html代码 赋值 取值 html代码 <input type="text" id="name"/> ...
- mysql多表查询取出最后的数据_数据库多表查询,如何取A表中最后一个数据在B表中进行查找?...
A表中有id user_id B表中有id phone a.user_id = b.id 需求:现在要取a.user_id最新的一个数据然后在B表中查找phone,并给b.phone发送短信= =.. ...
- js 不同页面间传递值并取值
原博主地址:http://blog.csdn.net/web_xyk/article/details/47857033 以前没用到过页面间传递参数再从后台获取数据,然后搜索了一下. 发现了一个比较好的 ...
- Python数据爬虫学习笔记(3)爬取豆瓣阅读的出版社名称数据
需求:写一个Python程序,实现获取豆瓣阅读网页上的所有出版社名称,并储存在指定路径的txt文件中,如下: 准备:观察该网页的源代码,注意到每个出版社名称都由固定格式的div所包裹,如下: 编写代码 ...
- easyui datalist 不显示数据_爬虫练习——豆瓣电影信息爬取及数据可视化
最近自学了简单的爬虫项目,简单记录下自己的小白学习路径. 本次爬取的是豆瓣电影TOP250数据,主要用到beautifulsoup.re.urllib库.SQLite包,数据可视化方面主要用到flas ...
- oracle求一行多列最大值,Oracle分组后取某列最大值的行数据
select * from ( select last_comment, row_number() over(partition by employeeid,roadline,stationname ...
- 原生JS仿造华为商城案例-实现了简单页面-两种轮播图思路的实现-动态展示数据
文章目录 功能简介 项目准备 项目说明 方案一:源代码 CSS样式 HTML结构 JS逻辑 方案二:源代码 CSS样式 HTML结构 JS逻辑 功能简介 页面展示 该项目功能实现: 无限滚动轮播图 j ...
最新文章
- 315MHz 高频射频发射模块
- 如何定制视频业务- ramdisk 内存文件系统
- Linux如何查找大文件或目录总结
- wxWidgets:菜单
- shell一段脚本的一点经验(实时文件流读写)
- OpenGL Compute Shader计算着色器的实例
- idea的pom变成橙色的xml文件
- AutoMapper多个对象映射到一个Dto对象
- Python 数据分析三剑客之 Pandas(九):时间序列
- ajax jsp模糊查询源码,Ajax动态执行模糊查询功能
- 三分钟教你用 Scarlet 写一个 WebSocket App
- python获取字典长度_python字典操作
- android 遮罩 进度条,bootstrap创建带遮罩层的进度条
- Linux 命令(91)—— whereis 命令
- 怎么设计接口测试用例更好——百度大佬“教你写用例”
- obs计算机丢失,安装obs时提醒没法启动此程序,因为计算机丢失
- c语言编程字符串_C编程中的字符串
- Android 原生 MediaPlayer 和 MediaCodec 的区别和联系(二)
- V4L2驱动的移植与应用(二+三)【转】
- 有源滤波器matlab/simulink 采用simulink搭建有源滤波器模型,有操作视频和报告资料,运行稳定,效果显著