JS 获取GET 参数
对于 URL,我们需要了解更多,因为我们的开发中可能会需要提取URL的部分信息来做不同的事情,事实上这也是与后端交互的一种独特的方式,当然这肯定是安全的,当请求被返回,关于 url 的信息就被记录在了 Window 对象的 Location对象中,取值的结果并不随着用户手动修改地址栏中的字符而发生任何改变,这一点是很重要的。了解了这些内容,那么我们从下面这张图开始吧:

图片中间那一行较长的字符串是一个完整的 URL,它包含了一个 URL 中可能包含的任何部分:协议、域名、端口号(当然,大多数情况下,我们在浏览网页的时候并没有看到端口号,因为他被隐藏了,默认就是80端口,你加上也不会有错)、路径、参数、描点。在 JavaScript 中,获取到这一行字符串的方法是访问 window.location.href,href属性包含了一个页面完整的 URL。如果想得到 URL 中某一部分的值,我们可以通过复杂、繁琐的正则表达式来解析这个完整的 URL,不过更方便的办法是通过 location 的其他属性来获取。比如 location 的 protocol 属性中记录了带冒号的协议名,pathname 属性存储着路径名,这些属性是 href 的分离,给开发者带来了很多方便。下面的表格中罗列了 location 下所有的属性,以及他们各自记录的值。如果不能理解表格中的内容,那么上面那张图中的色块和文字,形象地描述了各属性在 URL 中对应的位置。
属性 值 href 完整的 URL protocol 协议 hostname 主机名 host 主机名加端口号 port 的端口号 pathname 当前 URL 的路径部分 search URL 的查询部分 hash #开始的锚
值得注意的是,上面的属性都是可选的,这表示我们可以通过 JavaScript 改变他们的值。这些属性大都一目了然非常简单,唯有 search 部分是比较麻烦的,search部分是以 GET 方式传给后台的参数,以 ? 开始,& 作为分隔符,= 赋值的序列化的字符串,如此一来通过 location.search 得到的值往往并不是想要得到的最终结果,通过 search 的结构来分析,我们可能更想要得到的结果是一个包含明确对应关系的关联数组。于是我们需要对 location.search 中得到的字符串进行进一步的处理。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function getArgs() { var args = {}; var query = location.search.substring(1); // Get query string var pairs = query.split("&"); // Break at ampersand for(var i = 0; i < pairs.length; i++) { var pos = pairs[i].indexOf('='); // Look for "name=value" if (pos == -1) continue; // If not found, skip var argname = pairs[i].substring(0,pos);// Extract the name var value = pairs[i].substring(pos+1);// Extract the value value = decodeURIComponent(value);// Decode it, if needed args[argname] = value; // Store as a property } return args;// Return the object } |
上面的代码来自于《JavaScript 权威指南》一书中。getArgs 方法不接收参数,它主动提取 URL 中的 search 部分加以解析,并返回一个 JSON。例如我们最开始那张图片中的 URL ,使用 getArgs 方法将会得到下面的结果:
|
1
2
3
|
var search = { search:html} |
这样,关于 URL 的所有信息都能得到一个非常明确的结果,很简单。
不过更推荐使用正则表达式来解析URL,其运行效率更高,代码也更加简洁。
|
1
2
3
4
5
6
7
8
9
10
|
function getArgs(){ var args = {}; var match = null; var search = decodeURIComponent(location.search.substring(1)); var reg = /(?:([^&]+)=([^&]+))/g; while((match = reg.exec(search))!==null){ args[match[1]] = match[2]; } return args;} |
原文链接:http://www.jsann.com/post/JS_GET_parameters_to_obtain.html
JS 获取GET 参数的更多相关文章
- 【转】javascript浏览器参数的操作,js获取浏览器参数
原文地址:http://www.haorooms.com/post/js_url_canshu html5修改浏览器地址:http://www.cnblogs.com/JiangXiaoTian/ar ...
- js获取url参数的方法
js获取url参数的方法有很多. 1.正则分析 function getQueryString(name) { var reg = new RegExp("(^|&)" + ...
- 【功能代码】---4用JS获取地址栏参数方法
用JS获取地址栏参数方法 // 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new Reg ...
- get方法与post方法的区别与js获取url参数的方式
1.get方法与post方法的区别: 区别一:get重点在从服务器上获取资源,post重点在向服务器发送数据:区别二:get传输数据是通过URL请求,以field(字段)= value的形式,置于UR ...
- (转)用JS获取地址栏参数的方法(超级简单)
转自http://www.cnblogs.com/fishtreeyu/archive/2011/02/27/1966178.html 用JS获取地址栏参数的方法(超级简单) 方法一:采用正则表达式获 ...
- 【JS】---4用JS获取地址栏参数方法
用JS获取地址栏参数方法 // 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new Reg ...
- js获取url参数的两种方法
js获取参数,在以前我都是用正在去拆分,然后获取,这种方式感觉是最简单的 方式1: function QueryString(item) { var sValue=location.search.ma ...
- JS获取地址参数
今天碰到获取地址参数的问题,所以总结了一下. 第一种情况:获取地址栏参数 function getUrlParam(name){ var reg = new RegExp("(^|& ...
- .NET手记-JS获取Url参数
最近为App做活动专区,其中很多活动都是采用html 5页面来制作的.一方面体量较小,制作快速,更新维护容易:另一方面,嵌入App后适配效果也不会很差. 这里我们采用混编形式来从native app传 ...
- node.js获取请求参数的方法和文件上传
var http=require('http') var url=require('url') var qs=require('querystring') http.createServer(onRe ...
随机推荐
- 从火车站车次公示栏来学Java读写锁
Java多线程并发之读写锁 本文主要内容:读写锁的理论:通过生活中例子来理解读写锁:读写锁的代码演示:读写锁总结.通过理论(总结)-例子-代码-然后再次总结,这四个步骤来让大家对读写锁的深刻理解. 本 ...
- (3)SQL Server表分区
1.简介 当一个表数据量很大时候,很自然我们就会想到将表拆分成很多小表,在执行查询时候就到各个小表去查,最后汇总数据集返回给调用者加快查询速度.比如电商平台订单表,库存表,由于长年累月读写较多,积累数 ...
- 1.Metasploit介绍与基本命令
Metasploit体系框架介绍 Metasploit是目前世界上领先的渗透测试工具,也是信息安全与渗透测试领域最大的开源项目之一.它彻底改变了我们执行安全测试的方式. Metasploit之所以流行 ...
- JMeter中聚合报告的各项参数详解
下面我们来共同学习这些参数的作用: 1.Lable:Label:每个 JMeter 的 element(例如 HTTP Request)都有一个 Name 属性,这里显示的就是 Name 属性的值: ...
- 《Three.js 入门指南》2.4.1- 照相机 - 透视投影demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 课程登记窗口java
设计窗口,实现课程的登记,并且将相应的数据写入文件之中.保证的是课程名称不可以重复,对于任课老师必须是在已经设定好的五位老师之中.并且上课地点也是在预先设定的范围内.窗口可以持续进行保存,数据将在判断 ...
- easy-mock 本地部署(挤需体验三番钟,里造会干我一样,爱象节款mock)
前言 很多小伙伴问我怎么在自己公司的项目里面添加配置mock,在vue项目里面都知道怎么配置mock,在大型前端项目里面就一脸疑惑了. 我就回答他,你今天会在vue项目里面用,那天换公司是用angul ...
- 单线程IP扫描解析
扫描代码: private void Button_Click(object sender, RoutedEventArgs e) { a5.Items.Clear(); string str = t ...
- Elasticsearch系列---聚合查询原理
概要 本篇主要介绍聚合查询的内部原理,正排索引是如何建立的和优化的,fielddata的使用,最后简单介绍了聚合分析时如何选用深度优先和广度优先. 正排索引 聚合查询的内部原理是什么,Elastich ...
- Java面向对象的总结
面向对象的程序设计 1.面向对象 核心:以类的方式组织代码,以对象的方式封装数据 比喻:也就是说类是没有数据的,给了数据之后的类就是对象 封装 继承 多态 2.方法 a.一个方法只有一个返回值,只有一 ...