JavaScript 利用location对象实现跨页面传参

news/2024/7/3 1:30:22

需求简述:

两个页面login.html和homepage.html,在login页输入用户名,点击登录会跳转到主页,主页拿到login页输入的用户名

实现思路:

1. 跳转:修改location.html

2. 拿参:处理location.search,先去掉?,再根据“=”来分隔键值对,拿到值

注意:想要url中加上参数,login页面的form不可少

实现效果

login.html页面

homepage.html页面

 

代码

login.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>login页面</title>
</head>
<body><form action="homepage.html">用户名:<input type="text" name="uname"><input type="submit" value="登录" id="sub"></form>
</body>
<script>var sub = document.querySelector('#sub');sub.addEventListener('click',function(){location.href = 'homepage.html';});
</script>
</html>

 homepage.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>主页</title>
</head>
<body><p>我拿到了登录页面的用户名:</p>
</body>
<script>var parakv = location.search.substr(1);// console.log(parakv);var kandv = parakv.split("=");// console.log(kandv[1]);var p = document.querySelector('p');p.innerHTML += kandv[1];
</script>
</html>

 


http://lihuaxi.xjx100.cn/news/240773.html

相关文章

翻译:CREATE DATABASE语句

本文为mariadb官方手册&#xff1a;CREATE DATABASE的译文。 原文&#xff1a;https://mariadb.com/kb/en/create-database/我提交到MariaDB官方手册的译文&#xff1a;https://mariadb.com/kb/zh-cn/create-database/ 语法 CREATE [OR REPLACE] {DATABASE | SCHEMA} [IF NOT …

JavaScript 实现鼠标移动时实时获取其相对盒子的偏移

实现思路&#xff1a; 1. 获得盒子相对于页面的偏移量 div.offsetTop和div.offsetLeft 2. 获得鼠标相对于页面的偏移量 e.pageY和e.pageX 3. 前两者相减即可获得鼠标相对于盒子上沿和左侧的偏移 4. 使用鼠标移动事件 mousemove 实现效果&#xff1a; 代码 <!DOCTYPE h…

【播放器SDK】Android如何实现固定竖屏播放视频

安卓的固定竖屏播放并不受手机是否开启旋转的限制&#xff0c;需要用户设置Activity为固定竖屏。目前带皮肤的播放器内部对竖屏播放视频做了一定的支持.用户使用相对比较简单. 带皮肤播放器 参考Demo代码FixedSkinActivity 1.在onCreate里面设置当前Activity为固定竖屏模式. se…

JavaScript实现鼠标拖拽登录框

拖拽的本质是登录框获得光标的偏移来调整自身的偏移。 拖拽发生时&#xff0c;光标相对盒子的坐标不会变化&#xff0c;相对于页面的坐标却在变化&#xff0c;二者的差值就是盒子需要的。 两个注意点&#xff1a; 1. 赋值给盒子的什么属性 outer.style.top e.pageY - y p…

第七篇:数据预处理(四) - 数据归约(PCA/EFA为例)

前言 这部分也许是数据预处理最为关键的一个阶段。 如何对数据降维是一个很有挑战&#xff0c;很有深度的话题&#xff0c;很多理论书本均有详细深入的讲解分析。 本文仅介绍主成分分析法(PCA)和探索性因子分析法(EFA)&#xff0c;并给出具体的实现步骤。 主成分分析法 - PCA 主…

命令别名的设置alias,unalias

alias命令的作用是为系统中的命令设置别名&#xff0c;如果常用命令比较长&#xff0c;那么为其设置别名可以简化用户操作&#xff0c;例如为ls -l | more命令设置别名lm&#xff0c;这样只需要输入lm就可以得到和 ls -l | more相同的效果;为rm -i设置别名为rm&#xff0c;可以…

Python自动化测试白羊座-week3切片+元组

name zcl,py,zyznames [zcl,py,zyz]print(names[0])print(names[0:2]) #切片就是从里面取几个元素, 从第几个取到第几个结束.取值时顾头不顾尾.print(names[1])#切片操作对字符串也适用name1[zcl,py,zyz]print(name1[2])num list(range(10)) #用range生成列表&#xff0c;需…

区分json与jsonp

JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别&#xff0c;但其实他们根本不是一回事儿,下边简单区分概括一下&#xff1a; JSON是一种数据交换格式&#xff0c;而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。…