JS获取URL中参数值(QueryString)的4种方法分享


Posted in Javascript onApril 12, 2014

方法一:正则法

function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}
// 这样调用:
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));

方法二:split拆分法

function GetRequest() {
    var url = location.search; //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}
var Request = new Object();
Request = GetRequest();
// var 参数1,参数2,参数3,参数N;
// 参数1 = Request['参数1'];
// 参数2 = Request['参数2'];
// 参数3 = Request['参数3'];
// 参数N = Request['参数N'];

方法三:又见正则

通过JS获取url参数,这个经常用到。比如说一个url:http://w3water.com/?q=js,我们想得到参数q的值,那可以通过以下函数调用即可。

function GetQueryString(name) {  
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  
    var r = window.location.search.substr(1).match(reg);  //获取url中"?"符后的字符串并正则匹配
    var context = "";  
    if (r != null)  
         context = r[2];  
    reg = null;  
    r = null;  
    return context == null || context == "" || context == "undefined" ? "" : context;  
}
alert(GetQueryString("q"));

方法四:单个参数的获取方法

function GetRequest() {
   var url = location.search; //获取url中"?"符后的字串
   if (url.indexOf("?") != -1) {    //判断是否有参数
      var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
      strs = str.split("=");   //用等号进行分隔 (因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔)
      alert(strs[1]);          //直接弹出第一个参数 (如果有多个参数 还要进行循环的)
   }
}

 

Javascript 相关文章推荐
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
Node 自动化部署的方法
Oct 17 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
vue实现记事本功能
Jun 26 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
javascript对JSON数据排序的3个例子
Apr 12 #Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 #Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 #Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 #Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 #Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 #Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 #Javascript
You might like
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
php读取mysql的简单实例
2014/01/15 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
javascript高级学习笔记整理
2011/08/14 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
Python的动态重新封装的教程
2015/04/11 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
介绍一下Mysql的存储引擎
2015/02/12 面试题
客服实习的个人自我鉴定
2013/10/20 职场文书
教师的实习自我鉴定
2013/12/17 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
研究生求职自荐书
2014/06/23 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
导游词之桂林山水
2019/09/20 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
浅谈Python中对象是如何被调用的
2022/04/06 Python