頁面跳轉的時候可能需要一些數據的傳輸羹应,如商品跳轉到詳情頁需要傳一個id過去。那么在html中如何來實現呢裸违?
簡單的來說就是通過location.href設置路徑的時候通過?拼接的形式拼接進去一些參數供汛。然后在b頁面通過地址欄的信息來拿到這些參數紊馏,從而進行不同的數據渲染朱监。
例子:
a頁面內容:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/jquery.params.js"></script>
<title>a頁面</title>
<script>
$(function(){
name = $("#name").text();
age = $("#age").text();
$("#btn").on("click",function(){
jump1();
});
});
function jump1(){
url = "b.html?name="+name+"&age="+age;//此處拼接內容
window.location.href = url;
}
</script>
</head>
<body>
<div id="name">tony</div>
<div id="age">23</div>
<button id="btn">跳轉</button>
</body>
</html>
地址欄為:file:///C:/Users/%E5%88%98%E6%AC%A2/Desktop/prctise/a.html
b頁面:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/jquery.params.js"></script>
<title>b頁面</title>
<script>
$(function(){
getData1();
});
function getData1(){
var name = $.query.get("name");
var age = $.query.get("age");
$("#name").text(name);
$("#age").text(age);
}
</script>
</head>
<body>
<div id="name"></div>
<div id="age"></div>
</body>
</html>
地址欄為:file:///C:/Users/%E5%88%98%E6%AC%A2/Desktop/prctise/b.html?name=tony&age=23