使用js获取QueryString的方法小结


Posted in Javascript onFebruary 28, 2010

本文原理是使用正则表达式匹配location.search中的字符串。其中三个主要函数为 getQueryString()、getQueryStringByName(name)和getQueryStringByIndex(index)

三个主要方法:

方法 说明
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")); 
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
页面加载时:
使用js获取QueryString的方法小结
在QueryString's name后的文本框中输入要获取的QueryString的名称获取相应的值:
使用js获取QueryString的方法小结
在QueryString's index后的文本框中输入要获取的QueryString的索引获取相应的值(索引从0开始):
使用js获取QueryString的方法小结
这样就可以在页面中方便的获取QueryString的值了。最后附上测试页面QueryStringDemo.html的源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta content="text/html; charset=gb2312" http-equiv="Content-Type" /> 
<title>QueryString获取演示代码 3water.com</title> 
<script type="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><span id="queryString"></span> 
</div> 
<div> 
<span>QueryString's name : </span> 
<input id="txtQueryStringName" name="txtQueryStringName" type="text" /> 
<input name="btnGetByName" type="button" value="获取" onclick="getByName()" /> 
</div> 
<div> 
<span>QueryString's index : </span> 
<input id="txtQueryStringIndex" name="txtQueryStringIndex" type="text" /> 
<input name="btnGetByIndex" type="button" value="获取" onclick="getByIndex()" /> 
</div> 
<div> 
<span>结果 :</span><span id="txtResult"></span> 
</div> 
<!--页面加载时执行的操作--> 
<script type="text/javascript"> 
//显示所有QueryString 
document.getElementById("queryString").innerHTML = getQueryString(); 
//为txtQueryStringName绑定回车事件 
bindEnterEvent(txtQueryStringName, getByName); 
//为txtQueryStringIndex绑定回车事件 
bindEnterEvent(txtQueryStringIndex, getByIndex); 
</script> 
</body> 
</html>

pdf版下载地址
Javascript 相关文章推荐
JavaScript基本编码模式小结
May 23 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
js实现消息滚动效果
Jan 18 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
JS实现随机点名器
Apr 12 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 Javascript
JQuery 将元素显示在屏幕的中央的代码
Feb 27 #Javascript
jquery 最简单易用的表单验证插件
Feb 27 #Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 #Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 #Javascript
JavaScript 空位补零实现代码
Feb 26 #Javascript
javascript replace()正则替换实现代码
Feb 26 #Javascript
javascript function调用时的参数检测常用办法
Feb 26 #Javascript
You might like
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
语义化 H1 标签
2008/01/14 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
Express之get,pos请求参数的获取
2017/05/02 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
python实现文件名批量替换和内容替换
2014/03/20 Python
python with statement 进行文件操作指南
2014/08/22 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
Django发送邮件功能实例详解
2019/09/02 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
Jdbc数据访问技术面试题
2012/03/30 面试题
信息工程学院毕业生推荐信
2013/11/05 职场文书
护士进修自我鉴定
2014/02/07 职场文书
检讨书1000字
2014/10/11 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
初中物理教学反思
2016/02/19 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python