首先,我们先了解下html语言的定义,这样方便更好的理解页面的传递过程
-
定义
html是一种超文本标记语言,所谓超文本,因为它可以加入图片、声音、动画、影视等内容,因为它可以从一个文件跳转到另一个文件,与互联网上的服务器的网页文件链接。 -
接下来开始写个登录页面login.html,表单的提交方式选择get方式提交,在url栏上就能看到参数值
<form action="index.html" method="get">
<input type="text" name="username" id="" placeholder="请输入用户名"/>
<button type="submit">登录</button>
</form>
- 下面实现第二个页面的数据的获取页面index.html,拿到input中的值,再用innerHTML的方式去写入页面
<script type="text/javascript">
window.addEventListener('load',function(){
//获取元素
var div=document.querySelector('div');
//获取元素
console.log(location.search);
var str=location.search.substr(1);
console.log(str);
var arr = str.split('=');
div.innerHTML=arr[1]+'欢迎登录';
})
</script>
- 最后呈上简易的效果图