您的位置：首页 > Web前端 > HTML

HTML页面之间跳转传值

2016-04-19 18:44 274 查看

1.借助JQuery，通过URL拼接，从而传递数据。

jquery.params.js用于两个HTML网页之间的传值。a.html?name=waley&age=20;b.html页面则可以这样获取：$.query.get("name)。

例如;将a.html页面的数据传递到b.html页面：

a.html：

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<script src="js/jquery-2.2.3.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">wey</div>

<div id="age">20</div>

<button id="btn">跳转</button>

</body>

</html>

b.html页面通过$.query.get("name)获取。

b.html:

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<script src="js/jquery-2.2.3.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>

2.利用JavaScript Cookies来保存页面之间的信息：

在a.html页面中将数据存入到document.cookie;

a.html：

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<script src="js/jquery-2.2.3.min.js"></script>

<title>a页面</title>

<script>

$(function(){

name = $("#name").text();

age = $("#age").text();

$("#btn").on("click",function(){

jump2();

});

});

function jump2(){

document.cookie = "name="+name;

document.cookie = "age="+age;

window.location.href = "b.html";

}

</script>

</head>

<body>

<div id="name">wey</div>

<div id="age">20</div>

<button id="btn">跳转</button>

</body>

</html>

在b.html中获取cookie的值，并使用split(';')将值进行切割，获得多个数组,然后循环读取出里面的值；

b.html:

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<script src="js/jquery-2.2.3.min.js"></script>

<script src="js/jquery.params.js"></script>

<title>b页面</title>

<script>

$(function(){

getData2();

});

function getData2(){

var name=getCookie("name");

var ages = getCookie("age");

if (name!="")

{

$("#name").text(name);

}

if(ages!=""){

$("#age").text(ages);

}

}

//循环得到相应的值

function getCookie(cname)

{

var ss = document.cookie;

var name = cname + "=";

var ca = document.cookie.split(';');

for(var i=0; i<ca.length; i++)

{

var c = ca[i].trim();

if (c.indexOf(name)==0)

return c.substring(name.length,c.length);

}

return "";

}

</script>

</head>

<body>

<div id="name"></div>

<div id="age"></div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航