JS获取GET参数

来源：互联网发布：最新影视软件编辑：程序博客网时间：2024/04/29 22:43

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

图片中间那一行较长的字符串是一个完整的 URL，它包含了一个 URL 中可能包含的任何部分：协议、域名、端口号（当然，大多数情况下，我们在浏览网页的时候并没有看到端口号，因为他被隐藏了，默认就是80端口，你加上也不会有错）、路径、参数、描点。在 JavaScript 中，获取到这一行字符串的方法是访问 window.location.href，href属性包含了一个页面完整的 URL。如果想得到 URL 中某一部分的值，我们可以通过复杂、繁琐的正则表达式来解析这个完整的 URL，不过更方便的办法是通过 location 的其他属性来获取。比如 location 的 protocol 属性中记录了带冒号的协议名，pathname 属性存储着路径名，这些属性是 href 的分离，给开发者带来了很多方便。下面的表格中罗列了 location 下所有的属性，以及他们各自记录的值。如果不能理解表格中的内容，那么上面那张图中的色块和文字，形象地描述了各属性在 URL 中对应的位置。

属性值href完整的 URLprotocol协议hostname主机名host主机名加端口号port的端口号pathname当前 URL 的路径部分searchURL 的查询部分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;
}

JavaScript decodeURIComponent() 函数

JavaScript 全局对象

定义和用法

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

语法

decodeURIComponent(URIstring)

参数描述URIstring必需。一个字符串，含有编码 URI 组件或其他要解码的文本。

返回值

URIstring 的副本，其中的十六进制转义序列将被它们表示的字符替换。

实例

在本例中，我们将使用 decodeURIComponent() 对编码后的 URI 进行解码：

<script type="text/javascript">var test1="http://www.w3school.com.cn/My first/"document.write(encodeURIComponent(test1)+ "<br />")document.write(decodeURIComponent(test1))</script>

输出：

http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2Fhttp://www.w3school.com.cn/My first/

0 0