Jak uzyskać parametry żądania „GET” w JavaScript?


Odpowiedzi:


185

Wszystkie dane są dostępne pod

window.location.search

musisz przeanalizować ciąg, np.

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

wystarczy wywołać funkcję z nazwą zmiennej GET jako parametr, np.

get('foo');

ta funkcja zwróci wartość zmiennej lub wartość undefined, jeśli zmienna nie ma wartości lub nie istnieje


@Daniel Silveira: tak, może / powinien zdekodować wartość (i zakodować nazwę). Edytuje mój post za kilka chwil
Rafael

2
Zauważ, że decodeURIComponent nie dekoduje / wszystkich / możliwych ucieczek URI. W szczególności „+” nie zostanie zdekodowany jako „”. (Zapomniałem, w której przeglądarce to było. FF, może?) Specyfikacja wymaga od nich tylko dekodowania dokładnie tego, co koduje encodeUIRComponent i zakoduje „” jako „% 20”, więc „+” pozostaje bez zmian.
Jesse Rusak

Dlatego lubię PHP
ymakux

2
@volocuga w przeciwieństwie do PHP, obsługa adresów URL w JavaScript jest dość rzadką operacją, więc dostawcy przeglądarek nigdy tak naprawdę nie skupiali się na tych funkcjach.
Rafael

znakomicie odpowiedział Rafael;)
Jalal Sordo

36

Możesz użyć jquery.url , zrobiłem tak:

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

Sprawdź kod źródłowy

Zaktualizowane źródło: https://github.com/allmarkedup/jQuery-URL-Parser


1
Świetna odpowiedź, ale Twój link nie działa
Adam Casey,

@Adam, tak by się wydawało. Myślę, że jest to zaktualizowany adres URL: github.com/allmarkedup/jQuery-URL-Parser Wyszukiwanie w Google na stronie jquery.url Marka Perkinsa doprowadziło mnie do aktualizacji. Mam źródło, z którego opublikowałem tę odpowiedź, jeśli jej potrzebujesz.
Kaos,

3
Więc wymagana jest wtyczka?
JohnK,

var xyz = jQuery.url().param("param_in_url");to poprawna składnia, gdzie jQuery.url()podaje adres URL bieżącej strony. Proszę wprowadzić poprawki.
Ahmed Akhtar

13

Po prostu włóż moje dwa centy, jeśli chcesz mieć przedmiot zawierający wszystkie prośby

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

Uwaga, klucz dla każdego parametru get jest ustawiony na małe litery. Zrobiłem więc funkcję pomocniczą. Więc teraz wielkość liter nie jest rozróżniana.

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

1
Naprawdę podoba mi się ta metoda. +1
TR3B

12

wypróbuj poniższy kod, który pomoże Ci uzyskać parametry GET z adresu URL. po więcej szczegółów.

 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)

nie działa w przykładzie localhost: 8080 / # /? access_token = 111 z powodu części location.hash. Jeśli pojawi się symbol '#' location.search jest pusta
Maksim Tichonow

adres URL z symbolem „#” nie jest obsługiwany, więc musimy go usunąć. spróbuj tego: var url_string = window.location.href; // www.test.com?filename=test var url = nowy adres URL (url_string.replace ("# /", "")); var paramValue = url.searchParams.get ("access_token"); alert (paramValue)
VISHNU Radhakrishnan

NIEobsługiwane w przeglądarce Internet Explorer
Sebastian Scholle

5

Możesz użyć adresu URL, aby pobrać zmienne GET. W szczególności window.location.searchpodaje wszystko po znaku „?”. Możesz przeczytać więcej o window.location tutaj .


3

Dziś musiałem uzyskać parametry żądania strony użytkownika do tablicy asocjacyjnej tak ułożyła następujące, z niewielką pomocą z moich przyjaciół . Obsługuje również parametry bez =as true.

Z przykładem:

// 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

Możesz przeanalizować adres URL bieżącej strony, aby uzyskać parametry GET. Adres URL można znaleźć za pomocą location.href.


Pamiętaj, że nie jest to całkowicie niezawodne, ponieważ serwer mógł przekierować Cię w inne miejsce. Ale to najlepsze, co możesz zrobić.
Joel Coehoorn


2

Rozwiązanie redukujące mapę:

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;
    }, {});

Stosowanie:

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

1
Czy mógłbyś wyjaśnić, dlaczego miałbyś użyć do tego rozwiązania zmniejszającego mapę? O ile rozumiem, zmniejszanie map jest wydajne przy obsłudze naprawdę dużych zbiorów danych. Ponieważ jest to tylko żądanie HTTP, nie widzę sensu korzystania z rozwiązania zmniejszania map.
JorgeGRC

w rzeczywistości map/reducejest tylko mechanizmem przetwarzania kolekcji: może być używany z danymi o dowolnej wielkości. jest bardziej znany z dużych zbiorów danych ze względu na chęć zrównoleglania
StephenBoesch

1

W przeciwieństwie do innych odpowiedzi, UrlSearchParamsobiekt może uniknąć używania wyrażeń regularnych lub innych operacji na ciągach znaków i jest dostępny w większości nowoczesnych przeglądarek:

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

czy mógłbyś dodać jakieś wyjaśnienie, aby nieco bardziej odróżnić tę odpowiedź od innych?
Giulio Caccin

0

Funkcja tutaj zwraca parametr według nazwy. Po drobnych zmianach będziesz mógł zwrócić podstawowy adres URL, parametr lub kotwicę.

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];
}

0

Działa dla mnie w

url: 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]);
  }
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.