使用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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
jQuery的三种$()
Dec 30 Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
js实现模糊匹配功能
Feb 15 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
Javascript查看大图功能代码实现
May 07 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
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
python实现通过shelve修改对象实例
2014/09/26 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
python tkinter canvas使用实例
2019/11/04 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
汽车专业人才自我鉴定范文
2013/12/29 职场文书
新文化运动的口号
2014/06/21 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript