Как получить параметры GET из javascript?
http://domain.com/page.html?returnurl=%2Fadmin
Для js
внутри page.html
, как он может получить параметры GET
?
Для приведенного выше простого примера func('returnurl')
должен быть /admin
Но он также должен работать для сложных querystrngs...
Ответы
Ответ 1
С объектом window.location. Этот код дает вам GET без вопросительного знака.
window.location.search.substr(1)
В вашем примере он вернет returnurl=%2Fadmin
РЕДАКТИРОВАТЬ: я взял на себя смелость изменить ответ Qwerty, который действительно хорош, и поскольку он Я точно следил за тем, что спросил ОП:
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
, точно как спросил ОП. Я не уверен, что это может быть или не быть проблемой безопасности.
Или иначе с пробелом для цикла, который будет работать даже в 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;
}
Ответ 2
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
.
Ответ 3
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" //overriden with 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"
Ответ 4
Эй, вот правильный ответ на 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)
Ответ 5
более удобный способ сделать это::)
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;
}, {});
Ответ 6
Я делаю это так (для получения определенного параметра get, здесь "parameterName" ):
var parameterValue = decodeURIComponent(window.location.search.match(/(\?|&)parameterName\=([^&]*)/)[2]);
Ответ 7
Здесь я сделал этот код, чтобы преобразовать параметры 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()));
Ответ 8
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;
};
Ответ 9
В этом случае используйте regex и возвращайте null, если параметр не существует или не имеет значения:
function getQuery(q) {
return (window.location.search.match(new RegExp('[?&]' + q + '=([^&]+)')) || [, null])[1];
}
Ответ 10
Если вы не возражаете использовать библиотеку вместо своей собственной реализации, посмотрите https://github.com/jgallen23/querystring.
Ответ 11
Это решение обрабатывает декодирование 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']);
Ответ 12
Мое решение расширяется на @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, {});
}
Ответ 13
Если вы используете angularjs, вы можете использовать $routeParams
с помощью модуля ngRoute
Вы должны добавить модуль в свое приложение
angular.module('myApp', ['ngRoute'])
Теперь вы можете использовать сервис $routeParams
.controller('AppCtrl', function($routeParams) {
console.log($routeParams); //json object
}
Ответ 14
Вот еще один пример, основанный на приведенном выше примере 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"]);
Ответ 15
Вы можете использовать функцию поиска, доступную в объекте местоположения. Функция поиска предоставляет параметрную часть URL-адреса. подробности можно найти здесь - http://www.javascriptkit.com/jsref/location.shtml
Вам придется проанализировать полученную строку для получения переменных и их значений, например. разбивая их на '='
Ответ 16
Чтобы получить параметры как объект 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;
}
Ответ 17
Я создал простую функцию Javascript для доступа к параметрам GET из URL.
Просто включите этот источник 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>