目录
正题:
原因:
有时候上一个页面的部分数值需要在下一个页面内进行应用,这就需要进行页面之间的值传递。
解决方案:
方案1:一个数值的传送
实现结果:将a.html中的数值传递给了b.html
demo:
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a页面 </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript">
function to(){
var a=5;
var getval =a;
window.location.href="b.html?valus="+getval;
}
</script>
</head>
<body>
<button onclick="to()">传值</button>
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>b页面 </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript">
$(function(){
//console.log(location.search.concat());
//manyValues();
$("#show").html(oneValues());
})
//接收一个值
function oneValues(){
var result;
var url=window.location.search; //获取url中"?"符后的字串
if(url.indexOf("?")!=-1){
result = url.substr(url.indexOf("=")+1);
}
return result;
}
</script>
</head>
<body>
<span>接收的值是:</span>
<span id="show"></span>
</body>
</html>
实现效果:
方案2:可以进行多个数据的传递
有时候传递值的时候需要传递的不止一个,多数值传递。
a1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a1页面 </title>
<script language="javascript" >
function Post()
{
//单个值 Read.htm?username=baobao;
//多全值 Read.htm?username=baobao&sex=male;
url = "b1.html?username="+escape(document.all.username.value);
url += "&sex=" + escape(document.all.sex.value);
location.href=url;
}
</script>
</head>
<body>
<input type="text" name="username" value="姓名" onfocus="javascript:if(this.value=='姓名')this.value='';">
<input type="text" name="sex" value="性别" onfocus="javascript:if(this.value=='性别')this.value='';" >
<input type="button" value="Post" onclick="Post()">
</body>
</html>
b1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>b1页面 </title>
</head>
<body>
<h1 id="name" style="height:100px"> </h1>
<h1 id="sex" style="height:100px"> </h1>
<script language="javascript" >
/*
*--------------- Read.htm -----------------
* Request[key]
* 功能:实现ASP的取得URL字符串,Request("AAA")
* 参数:key,字符串.
* 实例:alert(Request["AAA"])
*--------------- Request.htm -----------------
*/
var url=location.search;
var Request = new Object();
if(url.indexOf("?")!=-1)
{
var str = url.substr(1) //去掉?号
strs = str.split("&");
for(var i=0;i<strs.length;i++)
{
Request[strs[i ].split("=")[0]]=unescape(strs[ i].split("=")[1]);
}
}
var name=Request["username"];
var sex=Request["sex"];
<!-- alert(Request["username"])
<!-- alert(Request["sex"]) --> -->
document.getElementById("name").innerHTML=name;
document.getElementById("sex").innerHTML=sex;
</script>
</body>
</html>
另一种写法:
b1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>b1页面 </title>
</head>
<body>
<h1 id="name" style="height:100px"> </h1>
<h1 id="sex" style="height:100px"> </h1>
<script>
String.prototype.getQuery = function(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = this.substr(this.indexOf("?")+1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
var str =location.search;
alert(str.getQuery("username"));
alert(str.getQuery("sex"));
var name=str.getQuery("username");
var sex=str.getQuery("sex");
document.getElementById("name").innerHTML=name;
document.getElementById("sex").innerHTML=sex;
</script>
</body>
</html>
实现效果:
方案3:数值存储法
a2.html
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<input type="text" name="username" />
<input type="button" name="" value="post" onclick="set()"/>
<script>
function set(){
//由于是一个新的技术,你可以通过下面的代码检测你的浏览器是否支持
if (window.localStorage) {
//存储变量的值
localStorage.name = document.all.username.value;
location.href = 'b2.html';
} else {
alert("NOT SUPPORT");
}
}
</script>
</body>
</html>
<!-- xmlns="http://www.w3.org/1999/xhtml" -->
b2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<h1 id="name" style="height:100px"> </h1>
<script>
var value = localStorage["name"];
<!-- alert(value); -->
document.getElementById("name").innerHTML=value;
</script>
</body>
</html>