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标签中onerror用法
Aug 13 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
PHP中的串行化变量和序列化对象
2006/09/05 PHP
php 调用远程url的六种方法小结
2009/11/02 PHP
PHP学习笔记之一
2011/01/17 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
php实现简单爬虫的开发
2016/03/28 PHP
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
会计学应届毕业生推荐信
2013/11/04 职场文书
学校食堂采购员岗位职责
2013/12/05 职场文书
外语系毕业生自荐信范文
2013/12/16 职场文书
大学新闻系求职信
2014/06/03 职场文书
2014年工程工作总结
2014/11/25 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
实习介绍信范文
2015/05/05 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
python实现局部图像放大
2021/11/17 Python