目标效果:
在login.html里面输入用户名e.g.aaaa【该案例代码局限性:不能输入中文用户名】
点击“登录”提交按钮
然后跳转到index.html中,显示“用户名欢迎您”e.g.aaaa欢迎您
e.g. login.html中
index.html中
login.html中的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="index.html">
<!-- 表单域中的action中写url地址 -->
<!-- 所有表单元素要写在表单域<form></form>里面 -->
用户名: <input type="text" name="uname">
<!-- 只有设置了name属性的表单元素才能在提交的时候传递值 -->
<input type="submit" value="登录">
</form>
</body>
</html>
index.html的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div></div>
<script>
// console.log(location.search); // ?uname=aaaa
// 1.先去掉? substr('开始截取的索引号',截取几个字符);
// 如果只写第一个开始截取的索引号,不写第二个数字,则默认截取到最后一个
var params = location.search.substr(1); // uname=andy
// console.log(params);
// 2. 利用=把字符串分割为数组 split('链接原数组的分隔符');
var arr = params.split('=');
console.log(arr); // ["uname", "aaaa"]
var div = document.querySelector('div');
// 3.把数据写入div中
div.innerHTML = arr[1] + '欢迎您';
</script>
</body>
</html>