2017-7-13
問題描述
靜態頁面間如何跳轉傳值？我在網上搜索后發現方法有幾種：
- 通過 url 攜帶數據
- 通過 cookie
- 通過 html5 的 sessionStorage 或 localStorage
本文總結了通過 url 攜帶數據傳值的方法
場景
假設有 a,b 兩個頁面，a 頁面有一超鏈接跳轉到 b 頁面，並將攜帶的數據填充到 b 頁面的 input 框里面
先看 a 頁面代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A page</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
$(document).ready(function() {
// 拼接跳轉url中要傳輸的數據
var dataUrl = [];
dataUrl.push('apple');
dataUrl.push('bear');
$('#aPage').on('click',function(){
$('#aPage').attr("href","b.html?data=" + dataUrl);
})
});
</script>
</head>
<body>
<a href="b.html" id="aPage">在url里帶數據跳轉到b頁面</a>
</body>
</html>
說明
- 首先我定義一個字符串數組 dataUrl 來存放傳遞的數據
- 這里假設我要傳遞的數據為 apple,bear
- 通過 jQuery 的點擊事件，將 a 標簽的 href 屬性修改成加上數據的 url
接着看 b 頁面代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>B page</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
$(document).ready(function() {
//使用正則表達式獲取url中的參數
function getUrlParam(name) {
//構造一個含有目標參數的正則表達式對象
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
//匹配目標參數
var r = window.location.search.substr(1).match(reg);
//返回參數值
if (r != null) return unescape(r[2]); return null;
}
var urlData = getUrlParam('data');
// 將數據填充到input框里面
$('#getUrlData').val(urlData);
});
</script>
</head>
<body>
<input type="text" id="getUrlData">
</body>
</html>
說明
- 創建一個 JavaScript 函數，使用正則表達式獲取 url 里面的數據值
- 將數據填充到 input 框里面
總結
利用 url 在靜態頁面間傳值，無非是利用 url 里 ? 后面攜帶的數據，然后在目標頁面通過方法獲取傳過來的數據，在本文中通過正則表達式檢索數據並獲取。
參考鏈接
https://segmentfault.com/a/1190000008012775
https://segmentfault.com/q/1010000000308712