利用 URL 在 HTML 页面间跳转传值
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
