两个HTML页面进行数值传递
废话：
上个礼拜加班加到怀疑人生！！！
这个星期终于有时间写博客了，总结一下上个项目中踩的各种坑。
目录
正题：
原因：
有时候上一个页面的部分数值需要在下一个页面内进行应用，这就需要进行页面之间的值传递。
解决方案：
方案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>