成刚网志 && CBolg Application http://www.chenggang.net Sun, 20 May 2012 22:43:39 +0800 Copyright © 2012 by CBolg Application. zh-cn Mon, 21 May 2012 14:55:51 +0800 利用JavaScript实现静态html页面参数传递 昨天别人问的一个问题，静态html的参数传递。以前接触过，不过没有仔细的看过。今天专门看了一下，原理很简单，就是javascript根据url分析出参数的值，只不过在php中是经过系统封装的，可以直接用，静态页面中需要自己提取罢了。

实现的方法主要有两个：一是正则提取（RegExp），二是字符串切割（split）。

实例如下：

 昨天别人问的一个问题，静态html的参数传递。以前接触过，不过没有仔细的看过。今天专门看了一下，原理很简单，就是javascript根据url分析出参数的值，只不过在php中是经过系统封装的，可以直接用，静态页面中需要自己提取罢了。

实现的方法主要有两个：一是正则提取（RegExp），二是字符串切割（split）。

实例如下：
假设test1.html向test2.html传值，形如http://test.com/test1.html?keyword=value，test2.html页面接受并输出这个值。

test1.html代码：
<html>
<head>
<title> TEST1 </title>
</head>
<body>
<script type="text/javascript">
function submit()
{
var input1= document.getElementById("inputid");
window.open("test2.html?keyword=" + input1.value);//传入参数
}
</script>
<input type="text" id="inputid">
<input type="button" onclick="submit()" value="提交">
</body>
</html>

test2.html代码：
A:正则取值方式的
<html>
<head>
<title> TEST 2</title>
<script type="text/javascript">
//获得参数的方法
var request =
{
QueryString : function(val)
{
var uri = window.location.search;
var url = window.location.href;
var re = new RegExp("" +val+ "=([^&?]*)", "ig");
return ((uri.match(re))?(uri.match(re)[0].substr(val.length+1)):null);
}
}
</script>
</head>

<body>
<script type="text/javascript">
//调用方法获得参数
var rt = request.QueryString("keyword");
document.write(rt);
</script>
</body>
</html>

B分割方式取值的：
<html>
<head>
<title>TEST2</title>
</head>
<body>
<script type="text/javascript">
function getparastr(strname)
{
var hrefstr,pos,parastr,para,tempstr;
hrefstr = window.location.href;
pos = hrefstr.indexOf("?")
parastr = hrefstr.substring(pos+1);
para = parastr.split("&");
tempstr="";
for(i=0;i<para.length;i++)
{
tempstr = para[i];
pos = tempstr.indexOf("=");
if(tempstr.substring(0,pos) == strname)
{
return tempstr.substring(pos+1);
}
}
return null;
}
// 获取tr参数
var tr = getparastr("keyword");
document.write(tr);
</script>
</body>
</html>

]]> http://www.chenggang.net/posts/84 Thu, 19 Feb 2009 14:42:28 +0800 admin JavaScript http://www.chenggang.nethttp://www.chenggang.net/posts/84