提问人:compile-fan 提问时间:3/27/2011 最后编辑:Peter Mortensencompile-fan 更新时间:6/11/2022 访问量:699664
如何从 JavaScript [duplicate] 中检索 GET 参数
How to retrieve GET parameters from JavaScript [duplicate]
问:
考虑:
http://example.com/page.html?returnurl=%2Fadmin
对于内部,它如何检索参数?js
page.html
GET
对于上面的简单示例,应该是 .func('returnurl')
/admin
但它也应该适用于复杂的查询字符串......
答:
使用 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;
}
评论
location.search.substr(1)
for
substr
substring
slice
(1)
replace()
您可以使用位置对象中提供的搜索功能。搜索函数提供 URL 的参数部分。详细信息可以在 Location 对象中找到。
您必须解析生成的字符串以获取变量及其值,例如在“=”上拆分它们。
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=1
params.test
评论
null
{}
?q=abc&g[]=1&g[]=2
一个更奇特的方法::)
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;
}, {});
评论
=value
Object.create(null)
{}
TL的;dr 解决方案,使用香草 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"
评论
我的解决方案扩展了@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, {});
}
评论
我这样做(要检索特定的get参数,这里是'parameterName'):
var parameterValue = decodeURIComponent(window.location.search.match(/(\?|&)parameterName\=([^&]*)/)[2]);
评论
null
如果您不介意使用库而不是滚动自己的实现,请查看 https://github.com/jgallen23/querystring。
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;
};
此解决方案处理 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']);
如果你使用的是 AngularJS,你可以使用 using module$routeParams
ngRoute
您必须向应用添加模块
angular.module('myApp', ['ngRoute'])
现在您可以使用服务:$routeParams
.controller('AppCtrl', function($routeParams) {
console.log($routeParams); // JSON object
}
这个使用正则表达式,如果参数不存在或没有任何值,则返回 null:
function getQuery(q) {
return (window.location.search.match(new RegExp('[?&]' + q + '=([^&]+)')) || [, null])[1];
}
评论
若要将参数作为 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
}
评论
object.toSource()
alert(JSON.stringify(getUrlParameters()))
我创建了一个简单的 JavaScript 函数来从 URL 访问 GET 参数。
只需包含此 JavaScript 源代码,您就可以访问参数。
例如:在 http://example.com/index.php?language=french 中,变量可以作为 访问。同样,所有参数的列表将作为数组存储在变量中。JavaScript 和 HTML 都在以下代码片段中提供:get
language
$_GET["language"]
$_GET_Params
<!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>
在这里,我制作了此代码,将 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 of getParameters
console.log(getParameters(getNavUrl()));
您应该使用 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/
评论
var params = new URLSearchParams(window.location.search.slice(1));
这是另一个基于 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"]);
评论
Location
let getParamsObject = ([...(new URLSearchParams(window.location.search))]).reduce((prev,curr)=>(Object.assign(prev,{[curr[0]]:curr[1]})),{})