如何从javascript中检索GET参数?

com*_*fan 341 javascript get

http://domain.com/page.html?returnurl=%2Fadmin
Run Code Online (Sandbox Code Playgroud)

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

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

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

Bak*_*dan 360

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

window.location.search.substr(1)
Run Code Online (Sandbox Code Playgroud)

从你的例子中它将返回 returnurl=%2Fadmin

编辑:我冒昧地改变了Qwerty的答案,这非常好,正如他指出的那样,我完全按照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;
}
Run Code Online (Sandbox Code Playgroud)

我从他的代码中删除了重复的函数执行,将其替换为变量(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;
}
Run Code Online (Sandbox Code Playgroud)

  • 问题定义和实现都是完全错误的答案.因此,如果你要返回整个查询字符串,这不是提问者所要求的,你应该至少使用`location.search.substr(1)`. (3认同)
  • 它也适用于复杂的查询字符串...... (2认同)

wel*_*rat 261

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();
Run Code Online (Sandbox Code Playgroud)

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

  • @Bakudan`for ... in`是你处理对象的时候.对于数组,for循环是首选,请参阅[这个问题`for ... in` with arrays](http://stackoverflow.com/questions/500504/javascript-for-in-with-arrays) (6认同)

Qwe*_*rty 134

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

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

这是最简单的解决方案.遗憾的是,它不处理多值键和编码字符.

"?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
Run Code Online (Sandbox Code Playgroud)

多值键编码字符

请参阅如何在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"]
Run Code Online (Sandbox Code Playgroud)


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

"?returnurl=%2Fadmin"
> qd.returnurl    // ["/admin"]
> qd['returnurl'] // ["/admin"]
> qd.returnurl[0] // "/admin"
Run Code Online (Sandbox Code Playgroud)

  • 似乎是这里最好的答案. (4认同)

AKn*_*nox 87

嘿,这是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)
Run Code Online (Sandbox Code Playgroud)

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

  • 不幸的是,这与IE不兼容:'( (7认同)
  • 添加代码片段下方列出的polyfill来修补IE并将该皱眉翻转过来. (7认同)
  • @Alexey>因为它应该是`var params = new URLSearchParams(window.location.search.slice(1));` (4认同)
  • 这[不适用于 iOS Safari](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams#Browser_compatibility),后者的市场份额比 IE 大得多。 (2认同)
  • 这是最有力的答案,无需使用发明的函数和大量代码 (2认同)

Ste*_*fan 37

更奇特的方式::)

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;
                      }, {});
Run Code Online (Sandbox Code Playgroud)

  • 确实很奇怪,但是注意reduce与所有浏览器都不兼容.更多信息:http://stackoverflow.com/questions/7094935/ie-js-reduce-on-an-object (10认同)

小智 9

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

var parameterValue = decodeURIComponent(window.location.search.match(/(\?|&)parameterName\=([^&]*)/)[2]);
Run Code Online (Sandbox Code Playgroud)


Ali*_*Ali 6

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

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


Ran*_*lal 6

获取 JSON 对象形式的参数:

console.log(getUrlParameters())

function getUrlParameters() {
    var out = {};
    var str = window.location.search.replace("?", "");
    var subs = str.split(`&`).map((si)=>{var keyVal = si.split(`=`); out[keyVal[0]]=keyVal[1];});
    return out
}
Run Code Online (Sandbox Code Playgroud)


小智 6

在这里,我已经制作了这个代码,将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()));
Run Code Online (Sandbox Code Playgroud)


归档时间:

查看次数:

466015 次

最近记录:

6 年,6 月 前