1、方式一:通过字符串截取的方式获取参数值;

  1)、函数一:获取URL中的参数名及参数值的集合

 /**
* [获取URL中的参数名及参数值的集合]
* 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
* @param {[string]} urlStr [当该参数不为空的时候,则解析该url中的参数集合]
* @return {[string]} [参数集合]
*/
function GetRequest(urlStr) {
if (typeof urlStr == "undefined") {
var url = decodeURI(location.search); //获取url中"?"符后的字符串
} else {
var url = "?" + urlStr.split("?")[1];
}
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]] = decodeURI(strs[i].split("=")[1]);
}
}
return theRequest;
}
 var parms_1 = GetRequest();
console.log(parms_1); // {"uid":"admin","rid":"1","fid":"2","name":"小明"}
console.log(parms_1['name']); // '小明'
var parms_2 = GetRequest('http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明');
console.log(parms_2); // {"uid":"admin","rid":"1","fid":"2","name":"小明"}
console.log(parms_2['name']); // '小明'

  2)、函数二:通过参数名获取url中的参数值

 /**
* [通过参数名获取url中的参数值]
* 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
* @param {[string]} queryName [参数名]
* @return {[string]} [参数值]
*/
function GetQueryValue(queryName) {
var query = decodeURI(window.location.search.substring(1));
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == queryName) { return pair[1]; }
}
return null;
}
 var queryVal=GetQueryValue('name');
console.log(queryVal);// 小明

2、方式二:通过正则获取到参数值;

 /**
* [通过参数名获取url中的参数值]
* 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
* @param {[string]} queryName [参数名]
* @return {[string]} [参数值]
*/
function GetQueryValue1(queryName) {
var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if ( r != null ){
return decodeURI(r[2]);
}else{
return null;
}
}
 var queryVal=GetQueryValue1('name');
console.log(queryVal);// 小明

——————————————————————————————————————————————————

js获取url参数值的方法总结的更多相关文章

  1. js获取url参数值的方法

    index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4&...... 静态html文件js读取url参数 根据获取html的参数值控制htm ...

  2. js获取url参数值的两种方式

    js获取url参数值的方法有很多,下面也为大家介绍两种.  方法一:正则分析法  function getQueryString(name) {  var reg = new RegExp(" ...

  3. js获取url传值的方法

    这篇文章主要介绍了js获取url传值的方法,实例分析了字符串分割与正则分析两种方法,并补充了一个基于正则匹配实现的js获取url的get传值函数,需要的朋友可以参考下 js获取url参数值: inde ...

  4. js获取url参数值的几种方式

    一.原生js获取URL参数值: 比如当前URL为:http://localhost:8080/#/page2?id=100&name=guanxy <template> <d ...

  5. js获取url参数值(HTML之间传值)

    <h3>未设置设备: <a href="javascript:addTab('设备列表','PKE_DeviceContent/PKE_DeviceContent.aspx ...

  6. js获取url参数的方法

    js获取url参数的方法有很多. 1.正则分析 function getQueryString(name) { var reg = new RegExp("(^|&)" + ...

  7. js获取url参数值

    用过的封装好的js获取url问号后的参数的方法: <script> var Request = new Object(); Request = GetRequest();var error ...

  8. js获取url参数值,js获取其他页面传递而来的值

    index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4&...... 静态html文件js读取url参数 根据获取html的参数值控制htm ...

  9. (转)js获取url参数值

    明天有空编辑下 今天做项目遇到js取得url地址问号后面的参数,找了下面的,用着非常好,项目是选项卡样式的,也就是一点击二级分类,底下的同样名字的背景变红(选项卡倍选中) http://www.cnb ...

随机推荐

  1. vim简单操作命令

    vim简单操作命令: 开启编辑:按“i”或者“Insert”键 退出编辑:“Esc”键 退出vim:“:q” 保存vim:“:w” 保存退出vim:“:wq” 不保存退出vim:“:q!” 查看当前系 ...

  2. java web轻量级开发面试教程

    最近面试java后端开发的感受:如果就以平时项目经验来面试,通过估计很难——再论面试前的准备 在上周,我密集面试了若干位Java后端的候选人,工作经验在3到5年间.我的标准其实不复杂:第一能干活,第二 ...

  3. JMeter系列教程

    认识JMeter工具 JMeter常用元件功能介绍 JMeter线程组 JMeter脚本三种录制方法 Jmeter组件介绍及其作用域和执行顺序 JMeter参数化 JMeter集合点 JMeter关联 ...

  4. Java之多线程创建方式

    多线程的由来 我们在之前,学习的程序在没有跳转语句的前提下,都是由上至下依次执行,那现在想要设计一个程序,边打游戏边听歌,怎么设计?要解决上述问题,咱们得使用多进程或者多线程来解决. 多线程的好处: ...

  5. 创建可执行的JAR包并运行

    将一个应用程序制作成可执行的JAR包,通过JAR包来发布应用程序.创建可执行JAR包的关键在于:让java -jar命令知道JAR包中哪个类是主类,java -jar命令可以通过运行该主类来运行程序. ...

  6. java1.8 ConcurrentHashMap 详细理解

    基于 jdk1.8 Java并发包中提供的一个线程安全且高效的HashMap实现,可以完全替代HashTable,在并发编程的场景中使用频率非常之高.可能大多人只是知道它使用了多个锁代替HashTab ...

  7. vue-cli3 用natapp 配置时 出现Invalid Host header的解决方案

    natapp 网址:https://natapp.cn/       用户名:137 **** ****   密码:26**_X** natapp 配置: 出现如下错误:Invalid Host he ...

  8. IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器2

    4  结构性伪类选择器 在学习结构性伪类选择器之前,先了解两个概念:伪类选择器和伪元素选择器.伪类选择器是CSS中已经定义好的选择器,不能随便命名.常用的伪类选择器是使用在a元素上的几种,如a:lin ...

  9. 分布式文件服务器FastDFS的使用

    分布式项目中涉及到的文件上传与下载,此时使用之前的上传方式,将上传的文件与当前项目所在服务器放在同一个位置,显然不符合分布式项目的理念,此时我们借助FastDFS将上传的文件数据存储到单纯的一个服务器 ...

  10. react+ant-mobile+lib-flexible构建移动端项目适应设计图尺寸(750)

    使用lib-flexible在react中先安装 npm install lib-flexible --save 因为插件使用的是rem适配,所以安装两个插件 npm install postcss- ...