javascript兩個靜態頁面之間傳遞和接收值

admin發表於2017-04-05
JavaScript

本章節介紹一下如何利用javascript實現兩個靜態頁面之間傳遞和接收引數。下面就通過程式碼例項做一下簡單介紹。

假設a.html頁面要向b.html提交資料，並且b.html能夠接收資料。

a.html頁面的程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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="softwhy.com"/></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頁面的程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

上面兩段程式碼演示了傳送和接收的功能。

程式碼完全可用，複製到本地同一目錄下即可進行測試。

相關文章