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 相关文章推荐
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 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
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
python查找目录下指定扩展名的文件实例
2015/04/01 Python
利用python批量检查网站的可用性
2016/09/09 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
配置管理计划的主要内容有哪些
2014/06/20 面试题
幼儿园教师演讲稿
2014/05/06 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
退学证明范本3篇
2014/10/29 职场文书
小学工作总结2015
2015/05/04 职场文书
使用Redis实现分布式锁的方法
2022/06/16 Redis