首页 文章

如何从JavaScript中检索GET参数? [重复]

提问于
浏览
295

这个问题在这里已有答案:

http://domain.com/page.html?returnurl=%2Fadmin

对于 page.html 内的 js ,如何检索 GET 参数?

对于上面这个简单的例子, func('returnurl') 应该是 /admin

但它也适用于复杂的查询......

17 回答

  • 0

    此解决方案处理URL解码:

    var params = function() {
        function urldecode(str) {
            return decodeURIComponent((str+'').replace(/\+/g, '%20'));
        }
    
        function transformToAssocArray( prmstr ) {
            var params = {};
            var prmarr = prmstr.split("&");
            for ( var i = 0; i < prmarr.length; i++) {
                var tmparr = prmarr[i].split("=");
                params[tmparr[0]] = urldecode(tmparr[1]);
            }
            return params;
        }
    
        var prmstr = window.location.search.substr(1);
        return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
    }();
    

    用法:

    console.log('someParam GET value is', params['someParam']);
    
  • 124

    嘿,这是2016年的正确答案:

    some = new URLSearchParams("https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8&q=mdn%20query%20string")
    var q = some.get('q') // 'mdn query string'
    var ie = some.has('ie') // true
    some.append('new','here')
    
    console.log(q)
    console.log(ie)
    console.log(some)
    

    https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams https://polyfill.io/v2/docs/features/

  • 2

    您可以使用位置对象中可用的搜索功能 . 搜索功能提供URL的参数部分 . 细节可以在这里找到 - http://www.javascriptkit.com/jsref/location.shtml

    您必须解析生成的字符串以获取变量及其值,例如将它们分开'='

  • 1
    var getQueryParam = function(param) {
        var found;
        window.location.search.substr(1).split("&").forEach(function(item) {
            if (param ==  item.split("=")[0]) {
                found = item.split("=")[1];
            }
        });
        return found;
    };
    
  • 1

    tl;使用vanilla javascript对单行代码进行解决方案

    var queryDict = {}
    location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
    

    这是 simplest solution . 遗憾的是 does not 处理多值键和编码字符 .

    "?a=1&a=%2Fadmin&b=2&c=3&d&e"
    > queryDict
    a: "%2Fadmin"  //overriden with last value, not decoded.
    b: "2"
    c: "3"
    d: undefined
    e: undefined
    

    多值键和编码字符?

    请参阅How can I get query string values in JavaScript?的原始答案

    "?a=1&b=2&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab&a=%2Fadmin"
    > queryDict
    a: ["1", "5", "t e x t", "/admin"]
    b: ["2"]
    c: ["3"]
    d: [undefined]
    e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]
    

    在您的示例中,您将访问如下值:

    "?returnurl=%2Fadmin"
    > qd.returnurl    // ["/admin"]
    > qd['returnurl'] // ["/admin"]
    > qd.returnurl[0] // "/admin"
    
  • 3

    如果您不介意使用库而不是滚动自己的实现,请查看https://github.com/jgallen23/querystring .

  • 247

    我的解决方案扩展到了@ tak3r

    当没有查询参数并且支持数组符号 ?a=1&a=2&a=3 时,它返回一个空对象:

    function getQueryParams () {
      function identity (e) { return e; }
      function toKeyValue (params, param) {
        var keyValue = param.split('=');
        var key = keyValue[0], value = keyValue[1];
    
        params[key] = params[key]?[value].concat(params[key]):value;
        return params;
      }
      return decodeURIComponent(window.location.search).
        replace(/^\?/, '').split('&').
        filter(identity).
        reduce(toKeyValue, {});
    }
    
  • 286

    这个使用正则表达式,如果param不存在或没有值,则返回null:

    function getQuery(q) {
       return (window.location.search.match(new RegExp('[?&]' + q + '=([^&]+)')) || [, null])[1];
    }
    
  • 0

    要将参数作为JSON对象获取:

    alert(getUrlParameters().toSource())
    
    function explode(delim, str)
    {
        return str.split(delim);
    }
    
    function getUrlParameters()
    {
        var out = {};
        var str = window.location.search.replace("?", "");
        var subs = explode('&', str);
        for(var i = 0; i < subs.length; ++i)
        {
            var vals = explode('=', subs[i]);
            out[vals[0]] = vals[1];
        }
        return out;
    }
    
  • 1

    一种更奇特的方式::)

    var options = window.location.search.slice(1)
                          .split('&')
                          .reduce(function _reduce (/*Object*/ a, /*String*/ b) {
                            b = b.split('=');
                            a[b[0]] = decodeURIComponent(b[1]);
                            return a;
                          }, {});
    
  • 7

    window.location.search 会从中返回一切吗?上 . 下面的代码将删除?,使用split分隔为键/值数组,然后将命名属性分配给params对象:

    function getSearchParameters() {
          var prmstr = window.location.search.substr(1);
          return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
    }
    
    function transformToAssocArray( prmstr ) {
        var params = {};
        var prmarr = prmstr.split("&");
        for ( var i = 0; i < prmarr.length; i++) {
            var tmparr = prmarr[i].split("=");
            params[tmparr[0]] = tmparr[1];
        }
        return params;
    }
    
    var params = getSearchParameters();
    

    然后,您可以通过调用 params.testhttp://myurl.com/?test=1 获取测试参数 .

  • 67

    使用window.location对象 . 此代码为您提供没有问号的GET .

    window.location.search.substr(1)
    

    从您的示例中它将返回 returnurl=%2Fadmin

    EDIT :我冒昧地改变Qwerty's answer,这是 really good ,正如他指出的那样,我完全按照OP的要求:

    function findGetParameter(parameterName) {
        var result = null,
            tmp = [];
        location.search
            .substr(1)
            .split("&")
            .forEach(function (item) {
              tmp = item.split("=");
              if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
            });
        return result;
    }
    

    我从他的代码中删除了重复的函数执行,将其替换为变量(tmp),并且我添加了decodeURIComponent,正如OP所要求的那样 . 我不确定这可能是也可能不是安全问题 .

    或者使用plain for循环,即使在IE8中也可以使用:

    function findGetParameter(parameterName) {
        var result = null,
            tmp = [];
        var items = location.search.substr(1).split("&");
        for (var index = 0; index < items.length; index++) {
            tmp = items[index].split("=");
            if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
        }
        return result;
    }
    
  • 0

    我这样做(要检索特定的get参数,这里'parameterName'):

    var parameterValue = decodeURIComponent(window.location.search.match(/(\?|&)parameterName\=([^&]*)/)[2]);
    
  • 31

    如果您使用的是angularjs,则可以使用 $routeParams 使用 ngRoute 模块

    您必须在应用上添加模块

    angular.module('myApp', ['ngRoute'])
    

    现在你可以使用服务 $routeParams

    .controller('AppCtrl', function($routeParams) {
      console.log($routeParams); //json object 
    }
    
  • 5

    在这里,我已经制作了这个代码,将GET参数转换为一个对象,以便更轻松地使用它们 .

    //Get Nav Url
    function getNavUrl() {
        //Get Url
        return window.location.search.replace("?", "");
    };
    function getParameters(url) {
        //Params obj
        var params = {};
        //To lowercase
        url = url.toLowerCase();
        //To array
        url = url.split('&');
    
        //Iterate over url parameters array
        var length = url.length;
        for(var i=0; i<length; i++) {
            //Create prop
            var prop = url[i].slice(0, url[i].search('='));
            //Create Val
            var value = url[i].slice(url[i].search('=')).replace('=', '');
            //Params New Attr
            params[prop] = value;
        }
        return params;
    };
    //Call To getParameters
    console.log(getParameters(getNavUrl()));
    
  • 3

    这是另一个基于Kat和Bakudan上面例子的例子,但是让它变得更加通用 .

    function getParams ()
    {
        var result = {};
        var tmp = [];
    
        location.search
            .substr (1)
            .split ("&")
            .forEach (function (item) 
            {
                tmp = item.split ("=");
                result [tmp[0]] = decodeURIComponent (tmp[1]);
            });
    
        return result;
    }
    
    location.getParams = getParams;
    
    console.log (location.getParams());
    console.log (location.getParams()["returnurl"]);
    
  • 2

    我创建了一个简单的Javascript函数来从URL访问GET参数 .

    只需包含此Javascript源代码,即可访问 get 参数 . 例如:在http://example.com/index.php?language=french中, language 变量可以作为 $_GET["language"] 访问 . 类似地,存储在变量 $_GET_Params 中的所有参数的列表作为数组 . 以下代码段中提供了Javascript和HTML:

    <!DOCTYPE html>
    <html>
      <body>
        <!-- This script is required -->
        <script>
        function $_GET() {
          // Get the Full href of the page e.g. http://www.google.com/files/script.php?v=1.8.7&country=india
          var href = window.location.href;
    	
          // Get the protocol e.g. http
          var protocol = window.location.protocol + "//";
    	
          // Get the host name e.g. www.google.com
          var hostname = window.location.hostname;
    	
          // Get the pathname e.g. /files/script.php
          var pathname = window.location.pathname;
    	
          // Remove protocol part
          var queries = href.replace(protocol, '');
    	
          // Remove host part
          queries = queries.replace(hostname, '');
    	
          // Remove pathname part
          queries = queries.replace(pathname, '');
    	
          // Presently, what is left in the variable queries is : ?v=1.8.7&country=india
    	
          // Perform query functions if present
          if (queries != "" && queries != "?") {
    	
    	    // Remove question mark ?
            queries = queries.slice(1);
    	
            // Split all the different queries
            queries = queries.split("&");
    		
            // Get the number of queries
            var length = queries.length;
    		
            // Declare global variables to store keys and elements
            $_GET_Params = new Array();
            $_GET = {};
    	
            // Perform functions per query
            for (var i  = 0; i < length; i++) {
    			
              // Get the present query
              var key = queries[i];
    			
              // Split the query and the value
              key = key.split("=");
    			
              // Assign value to the $_GET variable
              $_GET[key[0]] = [key[1]];
    			
              // Assign value to the $_GET_Params variable
              $_GET_Params[i] = key[0];
            }
          }
        }
    
        // Execute the function
        $_GET();
        </script>
        <h1>GET Parameters</h1>
        <h2>Try to insert some get parameter and access it through javascript</h2>
      </body>
    </html>
    

相关问题