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

Rafael
źródło
@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

Kaos
źródło
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()];
}
FabianCook
źródło
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)
VISHNU Radhakrishnan
źródło
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 .

Dan Lew
źródło
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
Matt
źródło
2

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

Thomas Owens
źródło
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
Lavi Avigdor
źródło
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)
Grindlay
źródło
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];
}
Tobi G.
źródło
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]);
  }
}
Maksim Tichonow
źródło