js获取url参数值的方法总结
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参数值的方法总结的更多相关文章
- js获取url参数值的方法
index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4&...... 静态html文件js读取url参数 根据获取html的参数值控制htm ...
- js获取url参数值的两种方式
js获取url参数值的方法有很多,下面也为大家介绍两种. 方法一:正则分析法 function getQueryString(name) { var reg = new RegExp(" ...
- js获取url传值的方法
这篇文章主要介绍了js获取url传值的方法,实例分析了字符串分割与正则分析两种方法,并补充了一个基于正则匹配实现的js获取url的get传值函数,需要的朋友可以参考下 js获取url参数值: inde ...
- js获取url参数值的几种方式
一.原生js获取URL参数值: 比如当前URL为:http://localhost:8080/#/page2?id=100&name=guanxy <template> <d ...
- js获取url参数值(HTML之间传值)
<h3>未设置设备: <a href="javascript:addTab('设备列表','PKE_DeviceContent/PKE_DeviceContent.aspx ...
- js获取url参数的方法
js获取url参数的方法有很多. 1.正则分析 function getQueryString(name) { var reg = new RegExp("(^|&)" + ...
- js获取url参数值
用过的封装好的js获取url问号后的参数的方法: <script> var Request = new Object(); Request = GetRequest();var error ...
- js获取url参数值,js获取其他页面传递而来的值
index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4&...... 静态html文件js读取url参数 根据获取html的参数值控制htm ...
- (转)js获取url参数值
明天有空编辑下 今天做项目遇到js取得url地址问号后面的参数,找了下面的,用着非常好,项目是选项卡样式的,也就是一点击二级分类,底下的同样名字的背景变红(选项卡倍选中) http://www.cnb ...
随机推荐
- vim简单操作命令
vim简单操作命令: 开启编辑:按“i”或者“Insert”键 退出编辑:“Esc”键 退出vim:“:q” 保存vim:“:w” 保存退出vim:“:wq” 不保存退出vim:“:q!” 查看当前系 ...
- java web轻量级开发面试教程
最近面试java后端开发的感受:如果就以平时项目经验来面试,通过估计很难——再论面试前的准备 在上周,我密集面试了若干位Java后端的候选人,工作经验在3到5年间.我的标准其实不复杂:第一能干活,第二 ...
- JMeter系列教程
认识JMeter工具 JMeter常用元件功能介绍 JMeter线程组 JMeter脚本三种录制方法 Jmeter组件介绍及其作用域和执行顺序 JMeter参数化 JMeter集合点 JMeter关联 ...
- Java之多线程创建方式
多线程的由来 我们在之前,学习的程序在没有跳转语句的前提下,都是由上至下依次执行,那现在想要设计一个程序,边打游戏边听歌,怎么设计?要解决上述问题,咱们得使用多进程或者多线程来解决. 多线程的好处: ...
- 创建可执行的JAR包并运行
将一个应用程序制作成可执行的JAR包,通过JAR包来发布应用程序.创建可执行JAR包的关键在于:让java -jar命令知道JAR包中哪个类是主类,java -jar命令可以通过运行该主类来运行程序. ...
- java1.8 ConcurrentHashMap 详细理解
基于 jdk1.8 Java并发包中提供的一个线程安全且高效的HashMap实现,可以完全替代HashTable,在并发编程的场景中使用频率非常之高.可能大多人只是知道它使用了多个锁代替HashTab ...
- vue-cli3 用natapp 配置时 出现Invalid Host header的解决方案
natapp 网址:https://natapp.cn/ 用户名:137 **** **** 密码:26**_X** natapp 配置: 出现如下错误:Invalid Host he ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器2
4 结构性伪类选择器 在学习结构性伪类选择器之前,先了解两个概念:伪类选择器和伪元素选择器.伪类选择器是CSS中已经定义好的选择器,不能随便命名.常用的伪类选择器是使用在a元素上的几种,如a:lin ...
- 分布式文件服务器FastDFS的使用
分布式项目中涉及到的文件上传与下载,此时使用之前的上传方式,将上传的文件与当前项目所在服务器放在同一个位置,显然不符合分布式项目的理念,此时我们借助FastDFS将上传的文件数据存储到单纯的一个服务器 ...
- react+ant-mobile+lib-flexible构建移动端项目适应设计图尺寸(750)
使用lib-flexible在react中先安装 npm install lib-flexible --save 因为插件使用的是rem适配,所以安装两个插件 npm install postcss- ...