对于 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 参数的更多相关文章

  1. 【转】javascript浏览器参数的操作,js获取浏览器参数

    原文地址:http://www.haorooms.com/post/js_url_canshu html5修改浏览器地址:http://www.cnblogs.com/JiangXiaoTian/ar ...

  2. js获取url参数的方法

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

  3. 【功能代码】---4用JS获取地址栏参数方法

    用JS获取地址栏参数方法 // 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new Reg ...

  4. get方法与post方法的区别与js获取url参数的方式

    1.get方法与post方法的区别: 区别一:get重点在从服务器上获取资源,post重点在向服务器发送数据:区别二:get传输数据是通过URL请求,以field(字段)= value的形式,置于UR ...

  5. (转)用JS获取地址栏参数的方法(超级简单)

    转自http://www.cnblogs.com/fishtreeyu/archive/2011/02/27/1966178.html 用JS获取地址栏参数的方法(超级简单) 方法一:采用正则表达式获 ...

  6. 【JS】---4用JS获取地址栏参数方法

    用JS获取地址栏参数方法 // 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new Reg ...

  7. js获取url参数的两种方法

    js获取参数,在以前我都是用正在去拆分,然后获取,这种方式感觉是最简单的 方式1: function QueryString(item) { var sValue=location.search.ma ...

  8. JS获取地址参数

    今天碰到获取地址参数的问题,所以总结了一下. 第一种情况:获取地址栏参数 function getUrlParam(name){ var reg = new RegExp("(^|& ...

  9. .NET手记-JS获取Url参数

    最近为App做活动专区,其中很多活动都是采用html 5页面来制作的.一方面体量较小,制作快速,更新维护容易:另一方面,嵌入App后适配效果也不会很差. 这里我们采用混编形式来从native app传 ...

  10. node.js获取请求参数的方法和文件上传

    var http=require('http') var url=require('url') var qs=require('querystring') http.createServer(onRe ...

随机推荐

  1. MATLAB 排序、拟合

    一.数据排序整合 1.随机生成的数,从小到大排序 clear rand('seed',1)%设置随机种子,确保随机数一样 edge_range=unifrnd (1, 10, 1, 10) edge_ ...

  2. Day17---轻量级、高性能的服务器--Nginx

    Nginx基础 一.nginx的介绍 简介:Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMPA/POP3/SMTR代理服务器. 二.编译安装nginx 1.首先要安装PRCE(PRCE ...

  3. 测试Activity和Fragment的生命周期

    Activity的生命周期有7个函数,Fragment的生命周期有11个函数. Activity生命周期除上述6个方法还有一个Restart()方法,该方法在该Activity从不可见(仍存在)到重新 ...

  4. Halo博客的搭建

    今日主题:搭建一个私人博客 好多朋友和我说,能不能弄一个简单的私人博客啊,我说行吧,今天给你们一份福利啦! 搭建一个私人博客,就可以在自己的电脑上写博客了 Halo Halo 是一款现代化的个人独立博 ...

  5. 【电商】性能测试网站搭建:XAMPP1.8+DBShop1.3

    1.安装准备 1.1软件版本 XAMPP的版本:XAMPP 1.8.2 DBShop的版本:DBShop 1.3   1.2.安装环境 我的环境:win10 win7,win10都可以运行的,安装步骤 ...

  6. ssl & ike/ipsec

    SSL/TLS

  7. VSCode——自定义VSCode背景图片

    本文转载自https://blog.csdn.net/yukinoai/article/details/84564949 1.以管理员身份运行VS Code,安装background插件 2.打开se ...

  8. 数据结构和算法(Golang实现)(6)简单入门Golang-并发、协程和信道

    并发.协程和信道 Golang语言提供了go关键字,以及名为chan的数据类型,以及一些标准库的并发锁等,我们将会简单介绍一下并发的一些概念,然后学习这些Golang特征知识. 一.并发介绍 我们写程 ...

  9. Java团队课程设计——基于学院的搜索引擎

    团队名称.团队成员介绍.任务分配,团队成员课程设计博客链接 姓名 成员介绍 任务分配 课程设计博客地址 谢晓淞(组长) 团队输出主力 爬虫功能实现,Web前端设计及其后端衔接 爬虫:https://w ...

  10. AJ学IOS 之微博项目实战(1)微博主框架-子控制器的添加

    AJ分享,必须精品 一:简单介绍 这是新浪微博的iOS端项目,来自于黑马的一个实战项目. 主要分成五大模块,本次全部运用纯代码实现,其中会用到很多前面学过得内容,如果有的地方有重复的知识点,说明这个知 ...