如何在 JavaScript 中获取“GET”请求参数？ [复制]答案

【问题标题】：How to get "GET" request parameters in JavaScript? [duplicate]如何在 JavaScript 中获取“GET”请求参数？ [复制]
【发布时间】：2010-10-24 06:44:21
【问题描述】：

如何在 JavaScript 中从请求中获取“GET”变量？

是 jQuery 还是 YUI！有这个功能吗？

【问题讨论】：

标签： javascript

【解决方案1】：

可以通过解析当前页面的URL来获取GET参数。使用location.href可以找到该URL。

【讨论】：

请注意，这并不完全可靠，因为服务器可能已将您重定向到其他地方。但这是你能做的最好的了。

【解决方案2】：

您可以使用 URL 来获取 GET 变量。特别是，window.location.search 给出了（包括）“？”之后的所有内容。您可以阅读有关 window.location here 的更多信息。

【讨论】：

【解决方案3】：

2021 年 6 月更新：

当今的浏览器具有用于处理 URL (URL) 和查询字符串 (URLSearchParams) 的内置 API，这些应该是首选，除非您需要支持一些旧浏览器或 Opera mini (Browser support)。

原文：

所有数据都可以在

window.location.search

你必须解析字符串，例如。

function get(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}

只需调用带有 GET 变量名作为参数的函数，例如。

get('foo');

如果变量没有值或不存在，此函数将返回变量值或未定义

【讨论】：

@Daniel Silveira：是的，它可以/应该解码值（并对名称进行编码）。稍后将编辑我的帖子
请注意，decodeURIComponent 不会解码 /all/ 可能的 URI 转义。特别是“+”不会被解码为“”。（我忘记了这是在哪个浏览器中。FF，也许吧？）规范要求他们只解码 encodeUIRComponent 编码的内容，它会将“”编码为“%20”，所以“+”被单独留下。
这就是我喜欢 PHP 的原因
@volocuga 与 PHP 不同，在 JavaScript 中处理 URL 是非常罕见的操作，因此浏览器供应商从未真正关注这些功能。
拉斐尔回答得很好；）

【解决方案4】：

如果你已经使用 jquery，有一个 jquery 插件可以处理这个问题：

http://plugins.jquery.com/project/query-object

【讨论】：

【解决方案5】：

你可以使用jquery.url 我是这样做的：

var xyz = jQuery.url.param("param_in_url");

Check the source code

更新来源：https://github.com/allmarkedup/jQuery-URL-Parser

【讨论】：

很好的答案，但您的链接已失效
@Adam 看起来是这样。我认为这是更新后的 URL：github.com/allmarkedup/jQuery-URL-Parser 在 Mark Perkins jquery.url 上的谷歌搜索让我得到了更新。如果您需要，我有发布此答案时的来源。
所以需要插件？
var xyz = jQuery.url().param("param_in_url"); 是正确的语法，jQuery.url() 给出了当前页面的 URL。请更正。

【解决方案6】：

如果你想要一个包含所有请求的对象，只需投入我的两分钱

function getRequests() {
    var s1 = location.search.substring(1, location.search.length).split('&'),
        r = {}, s2, i;
    for (i = 0; i < s1.length; i += 1) {
        s2 = s1[i].split('=');
        r[decodeURIComponent(s2[0]).toLowerCase()] = decodeURIComponent(s2[1]);
    }
    return r;
};

var QueryString = getRequests();

//if url === "index.html?test1=t1&test2=t2&test3=t3"
console.log(QueryString["test1"]); //logs t1
console.log(QueryString["test2"]); //logs t2
console.log(QueryString["test3"]); //logs t3

注意，每个 get 参数的键都设置为小写。所以，我做了一个辅助函数。所以现在它不区分大小写了。

function Request(name){
    return QueryString[name.toLowerCase()];
}

【讨论】：

真的很喜欢这种方法。 +1

【解决方案7】：

map-reduce 解决方案：

var urlParams = location.search.split(/[?&]/).slice(1).map(function(paramPair) {
        return paramPair.split(/=(.+)?/).slice(0, 2);
    }).reduce(function (obj, pairArray) {            
        obj[pairArray[0]] = pairArray[1];
        return obj;
    }, {});

用法：

For url: http://example.com?one=1&two=2
console.log(urlParams.one) // 1
console.log(urlParams.two) // 2

【讨论】：

您能否说明一下为什么要为此使用 map-reduce 解决方案？据我了解，map-reduce 在处理非常大的数据集时非常有效。由于这只是一个 HTTP 请求，我看不出使用 map-reduce 解决方案的意义。
其实map/reduce只是一个集合处理机制：可以用于任何大小的数据。由于愿意并行化，它以大数据而闻名

【解决方案8】：

今天我需要将页面的请求参数放入一个关联数组中，所以我将以下内容放在一起，以及来自my friends 的一点help。它还将没有= 的参数处理为true。

举个例子：

// URL: http://www.example.com/test.php?abc=123&def&xyz=&something%20else

var _GET = (function() {
    var _get = {};
    var re = /[?&]([^=&]+)(=?)([^&]*)/g;
    while (m = re.exec(location.search))
        _get[decodeURIComponent(m[1])] = (m[2] == '=' ? decodeURIComponent(m[3]) : true);
    return _get;
})();

console.log(_GET);
> Object {abc: "123", def: true, xyz: "", something else: true}
console.log(_GET['something else']);
> true
console.log(_GET.abc);
> 123

【讨论】：

【解决方案9】：

这里的函数按名称返回参数。通过微小的更改，您将能够返回基本 url、参数或锚点。

function getUrlParameter(name) {
    var urlOld          = window.location.href.split('?');
    urlOld[1]           = urlOld[1] || '';
    var urlBase         = urlOld[0];
    var urlQuery        = urlOld[1].split('#');
    urlQuery[1]         = urlQuery[1] || '';
    var parametersString = urlQuery[0].split('&');
    if (parametersString.length === 1 && parametersString[0] === '') {
        parametersString = [];
    }
    // console.log(parametersString);
    var anchor          = urlQuery[1] || '';

    var urlParameters = {};
    jQuery.each(parametersString, function (idx, parameterString) {
        paramName   = parameterString.split('=')[0];
        paramValue  = parameterString.split('=')[1];
        urlParameters[paramName] = paramValue;
    });
    return urlParameters[name];
}

【讨论】：

【解决方案10】：

试试下面的代码，它会帮助你从 url 获取 GET 参数。 for more details.

 var url_string = window.location.href; // www.test.com?filename=test
    var url = new URL(url_string);
    var paramValue = url.searchParams.get("filename");
    alert(paramValue)

【讨论】：

在示例 localhost:8080/#/?access_token=111 中不起作用，因为 location.hash 部分。如果出现“#”符号 location.search 为空
不支持带有“#”符号的网址，因此我们必须将其删除。试试这个： var url_string = window.location.href; // www.test.com?filename=test var url = new URL(url_string.replace("#/","")); var paramValue = url.searchParams.get("access_token");警报（参数值）
Internet Explorer 不支持

【解决方案11】：

为我工作

网址：http://localhost:8080/#/?access_token=111

function get(name){
  const parts = window.location.href.split('?');
  if (parts.length > 1) {
    name = encodeURIComponent(name);
    const params = parts[1].split('&');
    const found = params.filter(el => (el.split('=')[0] === name) && el);
    if (found.length) return decodeURIComponent(found[0].split('=')[1]);
  }
}

【讨论】：

【解决方案12】：

与其他答案不同，UrlSearchParams 对象可以避免使用正则表达式或其他字符串操作，并且适用于大多数现代浏览器：

var queryString = location.search
let params = new URLSearchParams(queryString)
// example of retrieving 'id' parameter
let id = parseInt(params.get("id"))
console.log(id)

【讨论】：

能否请您添加一些解释以将此答案与其他答案区分开来？