使用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 相关文章推荐
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
js实现盒子移动动画效果
Aug 09 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
Thinkphp多文件上传实现方法
2014/10/31 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
wxpython绘制音频效果
2019/11/18 Python
Python实现直播推流效果
2019/11/26 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
django下创建多个app并设置urls方法
2020/08/02 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
小学语文国培感言
2014/03/04 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
公司股份合作协议书
2014/12/07 职场文书
三峡导游词
2015/01/31 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
聘任书格式及范文
2015/09/21 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL