http://www.cnblogs.com/sunnycoder/archive/2010/02/28/1674998.html
从网上看到一些使用js获取QueryString的方法,但用起来不是很理想,所以决定自己写一个。主要原理是使用正则表达式匹配location.search中的字符串。
三个主要方法:
@H_404_7@说明
getQueryString
获取QueryString的数组。
例如路径QueryStringDemo.html?id=5&type=1&flag=0
调用后返回["id=5","type=1","flag=0"]
getQueryStringByName
getQueryStringByIndex
根据QueryString参数索引获取值
//获取QueryString的数组
functiongetQueryString(){
varresult = location.search.match(newRegExp("[\?\&][^\?\&]+=[^\?\&]+","g"));
if(result ==null){
return"";
}
for(vari = 0; i < result.length; i++){
result[i] = result[i].substring(1);
}
returnresult;
}
functiongetQueryStringByName(name){
varresult = location.search.match(newRegExp("[\?\&]"+ name+"=([^\&]+)",21)">"i"));
if(result ==null|| result.length < 1){
return"";
}
returnresult[1];
}
//根据QueryString参数索引获取值
functiongetQueryStringByIndex(index){
if(index ==null){
return"";
}
varqueryStringList = getQueryString();
if(index >= queryStringList.length){
return"";
}
varresult = queryStringList[index];
varstartIndex = result.indexOf("=") + 1;
result = result.substring(startIndex);
returnresult;
}
测试页面路径:QueryStringDemo.html?id=5&type=1&flag=0
页面加载时:
在QueryString's name后的文本框中输入要获取的QueryString的名称获取相应的值:
在QueryString's index后的文本框中输入要获取的QueryString的索引获取相应的值(索引从0开始):
这样就可以在页面中方便的获取QueryString的值了。最后附上测试页面QueryStringDemo.html的源代码:
@H_404_7@<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<Metacontent="text/html; charset=utf-8"http-equiv="Content-Type"/>
<title>QueryString获取</title>
<!--script type="text/javascript" src="CommonFiles/sunnycoder.js"></script-->
<scripttype="text/javascript">
//获取QueryString的数组
functiongetQueryString(){
varresult = location.search.match(newRegExp("g"));
for(vari = 0; i < result.length; i++){
result[i] = result[i].substring(1);
}
returnresult;
}
functiongetQueryStringByName(name){
varresult = location.search.match(newRegExp("=") + 1;
result = result.substring(startIndex);
returnresult;
}
//绑定当控件高亮选中时,点击“回车键”时执行的操作
//control:要绑定事件的控件
//func:要执行的方法
functionbindEnterEvent(control,func){
control.onkeypress =function(){
if(event.keyCode == 13){
func();
}
}
}
functiongetByName(){
varname = document.getElementById("txtQueryStringName").value;
document.getElementById("txtResult").innerHTML = getQueryStringByName(name);
}
//根据输入的QueryString的索引获取值
functiongetByIndex(){
varindex = document.getElementById("txtQueryStringIndex").value;
document.getElementById("txtResult").innerHTML = getQueryStringByIndex(index);
}
</script>
</head>
<body>
<div>
<span>QueryString :</span><spanid="queryString"></span>
</span>QueryString's name : </span>
<inputid="txtQueryStringName"name="txtQueryStringName"type="text"/>
<inputname="btnGetByName"type="button"value="获取"onclick="getByName()"/>
</span>QueryString's index :</inputid="txtQueryStringIndex"name="txtQueryStringIndex"type="text"/>
<inputname="btnGetByIndex"type="button"value="获取"onclick="getByIndex()"/>
</span>结果 :</spanid="txtResult"></div>
<!--页面加载时执行的操作-->
<scripttype="text/javascript">
//显示所有QueryString
document.getElementById("queryString").innerHTML = getQueryString();
//为txtQueryStringName绑定回车事件
bindEnterEvent(txtQueryStringName,getByName);
//为txtQueryStringIndex绑定回车事件
bindEnterEvent(txtQueryStringIndex,getByIndex);
</body>
</html>