使用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 相关文章推荐
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 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
function.inc.php超越php
2006/12/09 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
使用Python写一个小游戏
2018/04/02 Python
解读python logging模块的使用方法
2018/04/17 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
使用python绘制二维图形示例
2019/11/22 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
职业生涯规划书范文
2014/03/10 职场文书
银行求职自荐书
2014/06/25 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
平安家庭事迹材料
2014/12/20 职场文书