Как получить параметры запроса GET в JavaScript?


Ответы:


185

Все данные доступны под

window.location.search

вам нужно проанализировать строку, например.

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

просто вызовите функцию с именем переменной GET в качестве параметра, например.

get('foo');

эта функция вернет значение переменной или undefined, если переменная не имеет значения или не существует


@ Даниэль Сильвейра: да, он может / должен декодировать значение (и кодировать имя). Отредактирую свой пост через несколько минут
Рафаэль

2
Обратите внимание, что decodeURIComponent не декодирует / все / возможные escape-последовательности URI. В частности, «+» не будет декодироваться как «». (Я забыл, в каком браузере это было. Может быть, FF?) Спецификация требует, чтобы они декодировали только то, что кодирует encodeUIRComponent, и он будет кодировать "" как "% 20", поэтому "+" не трогаем.
Джесси Русак,

Вот почему мне нравится PHP
ymakux

2
@volocuga, в отличие от PHP, работа с URL-адресами в JavaScript - довольно редкая операция, поэтому производители браузеров никогда особо не уделяли внимания этим функциям.
Rafael

блестяще ответил Рафаэль;)
Джалал Сордо

36

Вы могли бы использовать jquery.urlэто так:

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

Проверить исходный код

Обновленный источник: https://github.com/allmarkedup/jQuery-URL-Parser


1
Отличный ответ, но ваша ссылка мертва
Адам Кейси

@ Адам, похоже, так. Я думаю, что это обновленный URL: github.com/allmarkedup/jQuery-URL-Parser Поиск в Google по Mark Perkins jquery.url привел меня к обновлению. У меня есть источник, когда я опубликовал этот ответ, если он вам нужен.
Kaos

3
Так нужен плагин?
JohnK

var xyz = jQuery.url().param("param_in_url");- правильный синтаксис, где jQuery.url()дает URL-адрес текущей страницы. Пожалуйста, сделайте исправление.
Ахмед Ахтар

13

Просто чтобы вложить свои два цента, если вам нужен объект, содержащий все запросы

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
Очень нравится этот метод. +1
TR3B

12

попробуйте приведенный ниже код, это поможет вам получить параметры GET с URL-адреса. Больше подробностей.

 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 пуст
Максим Тихонов

URL с символом "#" не поддерживается, поэтому мы должны удалить его. попробуйте это: var url_string = window.location.href; // www.test.com?filename=test var url = новый URL (url_string.replace ("# /", "")); var paramValue = url.searchParams.get ("access_token"); alert (paramValue)
ВИШНУ Радхакришнан

НЕ поддерживается в Internet Explorer
Себастьян Шолле

5

Вы можете использовать URL-адрес для получения переменных GET. В частности, window.location.searchвыдает все после (и включая) символа "?". Вы можете узнать больше о window.location здесь .


3

Сегодня мне нужно получить параметры запроса страницы в в ассоциативный массив , поэтому я собрал следующее, с небольшой помощью от моих друзей . Он также обрабатывает параметры без =as 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

2

Вы можете проанализировать URL-адрес текущей страницы, чтобы получить параметры GET. URL-адрес можно найти с помощью location.href.


Обратите внимание, что это не совсем надежно, так как сервер мог перенаправить вас в другое место. Но это лучшее, что ты можешь сделать.
Joel Coehoorn


2

Решение для уменьшения карты:

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

1
Не могли бы вы объяснить, почему для этого нужно использовать решение для уменьшения карты? Насколько я понимаю, map-reduce эффективна при работе с действительно большими наборами данных. Поскольку это всего лишь HTTP-запрос, я не вижу смысла использовать решение для уменьшения карты.
JorgeGRC

на самом деле map/reduceэто просто механизм обработки коллекций: может использоваться с данными любого размера. он более известен своими большими данными из-за его готовности к распараллеливанию
Стивен Бош

1

В отличие от других ответов, UrlSearchParamsобъект может избегать использования регулярных выражений или других манипуляций со строками и доступен в большинстве современных браузеров:

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

не могли бы вы добавить некоторые пояснения, чтобы немного отличить этот ответ от других?
Джулио Каччин

0

Здесь функция возвращает параметр по имени. С небольшими изменениями вы сможете вернуть базовый 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];
}

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.