需求简述:
两个页面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>
?
|