如何从 JavaScript 中检索 GET 参数

IT技术 javascript get
2021-01-23 03:28:53

考虑:

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

对于jsinside page.html,它如何检索GET参数?

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

但它也应该适用于复杂的查询字符串......

6个回答

使用window.location对象。此代码为您提供不带问号的 GET。

window.location.search.substr(1)

从您的示例中,它将返回 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;
}

我从他的代码中删除了重复的函数执行,将其替换为一个变量( tmp ),并且我还添加了decodeURIComponent,完全按照 OP 的要求。我不确定这是否可能是安全问题。

或者使用普通的 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;
}
我喜欢。我也喜欢普通for版。改变了我的反对票。无论如何,我之所以建议substrsubstring还是slice (1)因为有不必要的阅读和搜索任务?replace().
2021-03-13 03:28:53
无论大小如何,它都会返回所有 get 查询,但它将是一个 loooong 字符串。
2021-03-17 03:28:53
这个答案在问题定义和实现上都是完全错误的。因此,如果您无论如何要返回整个查询字符串,这不是提问者所问的,您location.search.substr(1)至少应该使用
2021-03-17 03:28:53
@Qwerty 我更改为子字符串 - 查询字符串中可能有一个问号(甚至转义 - %3F )
2021-03-31 03:28:53
它也应该适用于复杂的查询字符串......
2021-04-09 03:28:53

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();

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

它不会受到太大伤害,但需要注意。由于这里解释的原因:programmers.stackexchange.com/a/120362,不过,我不会返回null,而是空{}对象。
2021-03-12 03:28:53
@weltraumpirat,我实际上正在编辑我的评论以建议返回 {},但我没有看到您的回复。无论如何,感谢您更新您的代码:)
2021-03-12 03:28:53
也许你应该把它变成一个函数并插入: if (prmstr == "") { return null; 在第 2 行。否则如果没有 '?' 在 URL 中,您最终将 'params' 设置为 Object {: undefined},这很奇怪。
2021-03-16 03:28:53
@Bakudanfor...in是当您使用对象时。对于数组,首选 for 循环,请参阅有关for...in数组的此问题
2021-03-18 03:28:53
我已经修改了您的精彩代码,以允许?q=abc&g[]=1&g[]=2成为具有 2 个参数的关联数组的情况: q & g 其中 g 是具有 2 个值的数组。gist.github.com/simkimsia/11372570
2021-03-25 03:28:53

tl;dr使用 vanilla JavaScript 的单行代码解决方案

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

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

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

多值键编码字符?

请参阅如何在 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"
似乎是这里最好的答案。
2021-03-18 03:28:53
简短易懂:)
2021-03-30 03:28:53
@NaveedHasan VanillaJS 是一个术语,起源于一个没有额外库的纯 JavaScript 的笑话名称。看这里。
2021-04-03 03:28:53
谢谢你注意到我的错误。我还冒昧地修改了您的代码,删除了第二个拆分调用,它可以用局部变量替换。
2021-04-05 03:28:53
什么是香草?另一个js注入?@NaveedHasan
2021-04-07 03:28:53

您应该使用 URL 和 URLSearchParams 本机函数:

let url = new URL("https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8&q=mdn%20query%20string")
let params = new URLSearchParams(url.search);
let sourceid = params.get('sourceid') // 'chrome-instant'
let q = params.get('q') // 'mdn query string'
let ie = params.has('ie') // true
params.append('ping','pong')

console.log(sourceid)
console.log(q)
console.log(ie)
console.log(params.toString())
console.log(params.get("ping"))

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

不适用于 iOS Safari,它的市场份额比 IE 大得多。
2021-03-13 03:28:53
添加代码片段下方列出的 polyfill 以修补 IE 并将皱眉倒置。
2021-03-14 03:28:53
这是最好的答案,无需使用发明的功能和大量代码
2021-03-14 03:28:53
@Alexey > 因为应该是这样 var params = new URLSearchParams(window.location.search.slice(1));
2021-04-06 03:28:53
不幸的是,这与 IE 不兼容 :'(
2021-04-09 03:28:53

一种更奇特的方式来做到这一点:)

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;
                      }, {});
正如 Qwerty 指出的那样: decodeURIComponent 应该移到里面: a[b[0]] = decodeURIComponent(b[1])
2021-03-11 03:28:53
值得注意的是它在 IE8 中不受支持
2021-03-16 03:28:53
如果有一个 url 作为参数,decodeURIComponent 会错误地将其解析为另一个 &key=val 对。
2021-03-25 03:28:53
确实很花哨,但要注意 reduce 并非与所有浏览器都兼容。更多信息在这里:stackoverflow.com/questions/7094935/ie-js-reduce-on-an-object
2021-03-31 03:28:53