W adresie URL wartości ciągu zapytania często zawierają informacje o żądaniu, takie jak parametry wyszukiwania lub identyfikator używanego obiektu. Jeśli jakakolwiek logika biznesowa lub logika żądań jest obsługiwana w interfejsie użytkownika, ważne jest, aby wiedzieć, jak pobrać wartości ciągu zapytania z adresu URL. Istnieje wiele sposobów na osiągnięcie tego celu, z których kilka zobaczymy tutaj.
Parametry wyszukiwania URL
Połączenia URLSearchParams Interfejs jest obsługiwany przez wszystkie główne wersje przeglądarek z wyjątkiem IE 11. Działa poprzez parsowanie ciągu zapytania adresu URL i zapewnienie sposobu na dostęp do wartości. Na przykład:
let params = new URLSearchParams('q=node&page=2');
params.get('q');
params.get('page');
Jedną z wad tego interfejsu jest to, że musisz przekazać mu tylko ciąg zapytania adresu URL. Jeśli pracujesz z bieżącym adresem URL przeglądarki, jest to łatwe, ponieważ możesz po prostu przekazać window.location.search. Jeśli pracujesz z dowolnym innym adresem URL, musisz przeanalizować i przekazać ciąg zapytania osobno.
Aby przeanalizować parametry zapytania do obiektu, użyj URL.searchParams„s .entries() metoda, która zwraca an Iterator par klucz/wartość oraz Object.fromEntries przekształcić go w obiekt.
let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries);
Obiekt URL
Połączenia URL Interfejs API jest również obsługiwany przez wszystkie główne wersje przeglądarek z wyjątkiem IE 11. Oferuje bardziej elastyczny sposób analizowania adresów URL, a także zapewnia dostęp do wartości ciągu zapytania. Na przykład:
const url = new URL('https://stackabuse.com/search?q=node&page=2');
const searchParams = url.searchParams;
searchParams.get('q');
searchParams.get('page');
url.searchParams jest tym samym typem obiektu instancji zwróconego przez URLSearchParams.
Połączenia url Powyższy obiekt ma również wszystkie części adresu URL podzielone na części. Na przykład:
url.href;
url.origin;
url.protocol;
url.host;
url.hostname;
url.port;
url.pathname;
url.search;
url.hash;
Czysty JavaScript
Jeśli z jakiegoś powodu nie możesz uzyskać dostępu do powyższych interfejsów API lub chcesz mieć większą kontrolę nad analizowaniem, możesz użyć poniższego kodu, aby przeanalizować ciąg zapytania do obiektu.
function getQueryParams(url) {
const paramArr = url.slice(url.indexOf('?') + 1).split('&');
const params = {};
paramArr.map(param => {
const [key, val] = param.split('=');
params[key] = decodeURIComponent(val);
})
return params;
}
Note: Istnieje wiele sposobów parsowania parametrów zapytania w zwykłym JS, niektóre bardziej skomplikowane (i niezawodne) niż inne. To tylko jeden sposób i został zaadaptowany z ten sedno.
Następnie możemy użyć tej prostej funkcji JS, aby przetworzyć pojedynczy parametr zapytania w łańcuch:
getQueryParams('https://stackabuse.com/search?q=node&page=2')
