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>

上面两段代码演示了发送和接收的功能。

代码完全可用,复制到本地同一目录下即可进行测试。

javascript两个静态页面之间传递和接收值

回复

我来回复
  • 暂无回复内容