使用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 相关文章推荐
详解AngularJS中的表格使用
Jun 16 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
js消除图片小游戏代码
Dec 11 Javascript
vue实现前端分页完整代码
Jun 17 Javascript
详解vue 组件注册
Nov 20 Vue.js
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&amp;&amp;mysql)六
2006/10/09 PHP
php读取xml实例代码
2010/01/28 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
Less 安装及基本用法
2018/05/05 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
Python中的进程分支fork和exec详解
2015/04/11 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
python实现控制台输出彩色字体
2020/04/05 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
Python3实现飞机大战游戏
2020/04/24 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
马云的职业生涯规划之路
2014/01/01 职场文书
土地转让协议书范本
2014/04/15 职场文书
世界遗产导游词
2015/02/13 职场文书
Python中使用ipython的详细教程
2021/06/22 Python
nginx.conf配置文件结构小结
2022/04/08 Servers
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python