zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    java小提示:标示符常见命名规则、常用ASCII
    java程序练习:数组中随机10个数中的最大值
    java第四课:数组
    java程序练习:x进制转Y进制
    java第三课:分支结构、循环结构
    java第二课:运算符和表达式
    java第一课:环境、变量、数据类型
    00
    linux 设备驱动 nand驱动框架
    linux内核源码分析plat-form 分析
  • 原文地址:https://www.cnblogs.com/llll/p/4613969.html
Copyright © 2011-2022 走看看