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 相关文章推荐
javascript针对DOM的应用分析(二)
Apr 15 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
解决vue addRoutes不生效问题
Aug 04 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
php session和cookie使用说明
2010/04/07 PHP
Views rows style模板重写代码
2011/05/16 PHP
php的hash算法介绍
2014/02/13 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
详解js异步文件加载器
2016/01/24 PHP
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
简单的通用表达式求10乘阶示例
2014/03/03 Python
python判断字符串是否包含子字符串的方法
2015/03/24 Python
python创建进程fork用法
2015/06/04 Python
详解Python装饰器由浅入深
2016/12/09 Python
python自定义异常实例详解
2017/07/11 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
基于python实现高速视频传输程序
2019/05/05 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
后勤部经理岗位职责
2014/02/23 职场文书
企业晚会策划方案
2014/05/29 职场文书
运动会入场口号
2014/06/07 职场文书
交通安全横幅标语
2014/10/07 职场文书
四群教育工作总结
2015/08/10 职场文书