javascript两个静态页面之间传递和接收值
分类：实例代码
本章节介绍一下如何利用javascript实现两个静态页面之间传递和接收参数。下面就通过代码实例做一下简单介绍。
假设a.html页面要向b.html提交数据，并且b.html能够接收数据。
a.html页面的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript">
window.onload=function(){
var obt=document.getElementById("bt");
var url=document.getElementById("url");
var address=document.getElementById("address");
obt.onclick=function(){
var str="b.html?";
var urlVal=url.value;
var addressVal=address.value;
var str=str+"url="+urlVal+"&address="+addressVal
window.location.replace(str);
}
}
</script>
</head>
<body>
<form name="frm" id="frm">
<ul>
<li>网站:<input type="text" id="url" name="url" value="pipipi.net"/></li>
<li>地址:<input type="text" id="address" name="address" value="Qingdao"/></li>
<li><input type="button" id="bt" value="提交表单"/></li>
</ul>
</form>
</body>
</html>
上面的代码可以通过get方式也就是通过url向b.html页面传送数据。
b.html页面的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript">
window.onload=function(){
var getQueryString=function(name){
var reg=new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return r[2]; return "";
}
var str="";
str=str+getQueryString("url");
str=str+getQueryString("address");
var odiv=document.getElementById("show");
odiv.innerHTML=str;
}
</script>
</head>
<body>
<div id="show"></div>
</body>
</html>
上面两段代码演示了发送和接收的功能。
代码完全可用，复制到本地同一目录下即可进行测试。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu