看到一个面试题:如何获取浏览器url中查询字符串,呃呃呃,不会,然后赶紧找书、找度娘。嗯,终于懂了,总结一下,大家一起学习,共同进步!
做这道题之前,我们先来了解一下location对象
location是BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上,location对象是一个很特别的一个对象,因为它既是window对象的属性,也是document对象的属性;换句话说,window.location和document.location引用的是同一个对象。location对象的用处不只表现在它保存着当前文档的信息,还表现在它将URL解析为独立的片段,让开发人员可以通过不同的属性访问这些片段。下面是location对象的所有属性
以http://www.baidu.com:80/news/index.aspx?id=1&name=location#top为例来说一下每个属性的含义
location.hash :返回URL中的hash(#后面跟0或多个字符),如果URL中不包含散列,则包含空字符串 "#top"
location.host :返回服务器名称和端口号(如果有) "www.baidu.com:80"
location.hostname:返回不带端口号的服务器名称 "www.baidu.com"
location.href:返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值 "http://www.baidu.com:80/news/index.aspx?id=1&name=location#top"
location.pathname:返回url中的目录(或)文件名 "/news/index.aspx"
location.port:返回url中指定的端口号。如果URL中不包含端口号,则这个属性返回空字符串 "80"
location.protocol:返回页面使用的协议。通常是http:或https: "http:"
location.search:返回URL的查询字符串。这个字符串以问号开头 "?id=1&name=location"
location对象的这些属性都是可读可写的,如果改变了文档的location的属性(hash除外),则浏览器会载入新的页面。如果改变了location.hash,则页面会跳转到新的锚点,但此时页面不会重载
,OK,普及完毕,现在回到面试题,呐,什么是查询字符串?其实就是location对象的search属性的值
先写方法,再解释吧
这个函数的第一步是先去掉查询字符串开头的问号。当然,前提是location.search中必须要包含一个或多个字符。然后,所有参数将被保存在args对象中,该对象以字面量形式创建。接下来,根据&来分割查询字符串,并返回name=value格式的字符串数组。下面的for循环会迭代这个数组,然后根据等号分割每一项,从而返回第一项为参数名,第二项为参数值的数组。再使用decodeURIComponent()分别解码name和value(因为查询字符串应该是被编码过的)。最后,将name作为args对象的属性,将value作为相应属性的值。
文章主要参考《js高级程序设计》,嗯,很不错的一本书