Як отримати параметри запиту “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');

ця функція поверне значення змінних або невизначене, якщо змінна не має значення або не існує


@Daniel Silveira: так, він може / повинен декодувати значення (і закодувати ім'я). Відредагую мій пост за кілька хвилин
Рафаель,

2
Зверніть увагу, що decodeURIComponent не декодує / усі / можливі екранування URI. Зокрема "+" не буде розшифровуватися як "". (Я забуваю, в якому браузері це було. FF, можливо?) Специфікація вимагає, щоб вони декодували лише те, що encodeUIRComponent кодує, і він буде кодувати "" як "% 20", тому "+" залишиться в спокої.
Джессі Русак,

Ось чому мені подобається PHP
ymakux

2
@volocuga, на відміну від PHP, робота з URL-адресами в JavaScript є досить рідкісною операцією, тому постачальники браузерів ніколи не зосереджувались на цих функціях.
Рафаель

блискуче відповів Рафаель;)
Джалал Сордо

36

Ви можете скористатися jquery.urlя зробив так:

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

Перевірте вихідний код

Оновлене джерело: https://github.com/allmarkedup/jQuery-URL-Parser


1
Чудова відповідь, але ваше посилання мертве
Адам Кейсі

@Adam, здавалося б, так. Я думаю, що це оновлена ​​URL-адреса: github.com/allmarkedup/jQuery-URL-Parser Пошук у Google на Mark Perkins jquery.url привів мене до оновлення. У мене є джерело, коли я розмістив цю відповідь, якщо вона вам потрібна.
Каос

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

Зверніть увагу, що для кожного параметра отримання встановлено нижній регістр. Отже, я зробив допоміжну функцію. Тож тепер це не враховує регістр.

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"); оповіщення (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.


Зверніть увагу, що це не зовсім надійно, оскільки сервер, можливо, перенаправив вас кудись інше. Але це найкраще, що ви можете зробити.
Джоел Коухорн,


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
Не могли б ви вказати, чому б ви використовували для цього рішення зменшення карти? Наскільки я розумію, функція зменшення карти ефективна при обробці справді великих наборів даних. Оскільки це лише запит HTTP, я не бачу сенсу використовувати рішення зменшення карти.
JorgeGRC

насправді map/reduceє лише механізмом обробки колекцій: може використовуватися з даними будь-якого розміру. він більш відомий великими даними завдяки своїй готовності до паралелізації
StephenBoesch

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.