使用js获取QueryString
来源:互联网 发布:做菜基本常识 知乎 编辑:程序博客网 时间:2024/05/16 19:38
本文PDF下载
转载请注明出处
从网上看到一些使用js获取QueryString的方法,但用起来不是很理想,所以决定自己写一个。主要原理是使用正则表达式匹配location.search中的字符串。
三个主要方法:
方法
说明
getQueryString
获取QueryString的数组。
例如路径QueryStringDemo.html?id=5&type=1&flag=0
调用后返回["id=5", "type=1", "flag=0"]
getQueryStringByName
根据QueryString参数名称获取值
getQueryStringByIndex
根据QueryString参数索引获取值
//获取QueryString的数组
function getQueryString(){
var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+","g"));
if(result == null){
return "";
}
for(var i = 0; i < result.length; i++){
result[i] = result[i].substring(1);
}
return result;
}
//根据QueryString参数名称获取值
function getQueryStringByName(name){
var result = location.search.match(new RegExp("[\?\&]" + name+"=([^\&]+)","i"));
if(result == null || result.length < 1){
return "";
}
return result[1];
}
//根据QueryString参数索引获取值
function getQueryStringByIndex(index){
if(index == null){
return "";
}
var queryStringList = getQueryString();
if (index >= queryStringList.length){
return "";
}
var result = queryStringList[index];
var startIndex = result.indexOf("=") + 1;
result = result.substring(startIndex);
return result;
}
测试页面路径:QueryStringDemo.html?id=5&type=1&flag=0
页面加载时:
在QueryString's name后的文本框中输入要获取的QueryString的名称获取相应的值:
在QueryString's index后的文本框中输入要获取的QueryString的索引获取相应的值(索引从0开始):
这样就可以在页面中方便的获取QueryString的值了。最后附上测试页面QueryStringDemo.html的源代码:
<!DOCTYPEhtml PUBLIC "-//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的数组
function getQueryString(){
var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+","g"));
for(var i = 0; i < result.length; i++){
result[i] = result[i].substring(1);
}
return result;
}
//根据QueryString参数名称获取值
function getQueryStringByName(name){
var result = location.search.match(new RegExp("[\?\&]" + name+"=([^\&]+)","i"));
if(result == null || result.length < 1){
return "";
}
return result[1];
}
//根据QueryString参数索引获取值
function getQueryStringByIndex(index){
if(index == null){
return "";
}
var queryStringList = getQueryString();
if (index >= queryStringList.length){
return "";
}
var result = queryStringList[index];
var startIndex = result.indexOf("=") + 1;
result = result.substring(startIndex);
return result;
}
//绑定当控件高亮选中时,点击“回车键”时执行的操作
//control:要绑定事件的控件
//func:要执行的方法
function bindEnterEvent(control, func){
control.onkeypress = function(){
if (event.keyCode == 13){
func();
}
}
}
//根据输入的QueryString名称获取值
function getByName(){
var name = document.getElementById("txtQueryStringName").value;
document.getElementById("txtResult").innerHTML = getQueryStringByName(name);
}
//根据输入的QueryString的索引获取值
function getByIndex(){
var index = document.getElementById("txtQueryStringIndex").value;
document.getElementById("txtResult").innerHTML = getQueryStringByIndex(index);
}
</script>
</head>
<body>
<div>
<span>QueryString :</span><spanid="queryString"></span>
</div>
<div>
<span>QueryString's name : </span>
<inputid="txtQueryStringName"name="txtQueryStringName"type="text" />
<inputname="btnGetByName"type="button" value="获取"onclick="getByName()"/>
</div>
<div>
<span>QueryString's index :</span>
<inputid="txtQueryStringIndex"name="txtQueryStringIndex"type="text" />
<inputname="btnGetByIndex"type="button" value="获取"onclick="getByIndex()"/>
</div>
<div>
<span>结果 :</span><spanid="txtResult"></span>
</div>
<!--页面加载时执行的操作-->
<scripttype="text/javascript">
//显示所有QueryString
document.getElementById("queryString").innerHTML = getQueryString();
//为txtQueryStringName绑定回车事件
bindEnterEvent(txtQueryStringName, getByName);
//为txtQueryStringIndex绑定回车事件
bindEnterEvent(txtQueryStringIndex, getByIndex);
</script>
</body>
</html>
- 使用js获取QueryString
- 使用js获取QueryString
- 使用js获取GET参数QueryString
- 使用js获取QueryString的方法小结
- 正则表达式使用js获取QueryString
- js获取QueryString
- js获取QueryString
- js 获取地址参数 querystring
- js获取请求的url参数(QueryString)
- js QueryString
- JS querystring
- node.js的querystring.stringify的使用
- js中自定义QueryString方法,获取url中的参数值
- JS获取GET请求中QueryString中的参数
- JS获取URL中参数值(QueryString)的方法
- 用javascript获取querystring
- javascript获取querystring
- APEX:获取Url QueryString
- 表结构设计之拉链表
- Andorid简单应用理财工具-实现选择账目页面
- PC值、ARM流水线、超流水线和冯诺依曼、哈佛结构
- MemCached,OsCache,EhCache区别
- vb.net总结
- 使用js获取QueryString
- VS2010 + win7 一调试就卡死的问题解决方案
- 年终总结
- UITableView
- x264记录
- 隐士和神人--逍遥游篇3-·-庄子南华(南怀瑾老师)
- CAP 理论
- JasperReport和JasperReport Studio(iReport)生成PDF中文乱码的解决方案
- window上如何设置才能获取dump文件