Jak uzyskać wartości ciągów zapytania w JavaScript

Wartości ciągów zapytania w adresie URL często podaj informacje o żądaniu, takie jak parametry wyszukiwania. Do żądania strony internetowej można użyć ciągu zapytania, wykorzystując protokół HTTP. Od czasu do czasu możesz pobrać atrybuty ciągów zapytania w swoim skrypcie. Ponadto wiedza o tym, jak wyodrębnić dane ciągów zapytania z adresu URL, jest niezbędna, jeśli jakakolwiek działalność lub logika żądania jest obsługiwana na froncie.

Ten blog zdefiniuje procedurę otrzymywania wartości ciągu zapytania w JavaScript.

Jak uzyskać wartości ciągów zapytania w JavaScript?

Aby uzyskać wartości ciągu zapytania w JavaScript, użyj następujących metod:

• Użyj interfejsu API URL za pomocą metody get ()
• Urlsearchparams z metodą get ()
• Urlsearchparams z metodą wartości ()

Metoda 1: Pobierz wartości ciągów zapytania za pomocą interfejsu API adresu URL za pomocą metody get ()

Użyj "API URL”Z„Dostawać()”Metoda uzyskania wartości ciągów zapytania w JavaScript. URL (Uniform Resource Locator) to sposób na znalezienie konkretnego zasobu internetowego. Zazwyczaj składa się z protokołu (takiego jak „http" Lub "https„), Nazwa domeny (jak„przykład.com„) I ścieżka (np.„/ścieżka/do/zasob„). URL służą do uzyskiwania dostępu do stron internetowych, pobierania plików i dostępu do innych zasobów, w tym wartości ciągów zapytania w Internecie.

Przykład
Utwórz zmienną, która przechowuje adres URL z ciągami zapytania:

var urlqueryString = "https: // www.przykład.com/strona.html?słowo kluczowe = SearchText i FullName = JennyConvey & Click = Expit ”;

Zadzwoń do obiektu adresu URL, przekazując „UrlqueryString”:

var queryString = nowy URL (urlqueryString);

Użyj metody get (), przekazując klucz „Słowo kluczowe”Zapytanie, aby uzyskać wartość za pomocą atrybutu SearchParams. Właściwość SearchParams obiektu URL w JavaScript reprezentuje ciąg zapytania URL. Zapewnia sposób manipulowania ciągiem zapytania adresu URL jako obiektu, a nie łańcucha:

var value1 = QueryString.Poszukiwanie.GET („Słowo kluczowe”);
konsola.log („Wartość słowa kluczowego:” + wartość1);

Uzyskaj drugą wartość z ciągu zapytania, przekazując jego klucz do metody get () i wydrukuje na konsoli:

var value2 = QueryString.Poszukiwanie.Get („FullName”);
konsola.log („Wartość FullName:” + wartość2);

Podobnie przyciągnij trzecią wartość w ciągu:

var value3 = QueryString.Poszukiwanie.get („kliknij”);
konsola.log („Wartość kliknięcia:” + wartość3);

Można zauważyć, że wartości łańcucha zapytania zostały pomyślnie odzyskane:

Metoda 2: Uzyskaj wartości ciągów zapytania za pomocą URLsearchParams za pomocą metody get ()

„„Urlsearchparams„Interfejs może być używany w JavaScript do pobierania wartości z ciągu zapytania. Ocenia ciąg zapytania URL i oferuje medium, aby uzyskać dostęp do wartości. Zauważ, że należy wysłać tylko część ciągu adresu URL, którą można pobrać za pomocą „okno.Lokalizacja.szukaj„Jako parametr do urlsearchparams ().

Przykład
Utwórz zmienną, która przechowuje ciąg zapytania:

var urlQueryString = "keyword = SearchText & FullName = JennyConvey & Click = EnveIt";

Przekaż ciąg do „Urlsearchparams" interfejs:

var queryString = new urlsearchparams (urlqueryString);

Uzyskaj wartość klucza „Pełna nazwa”Z ciągu zapytania za pomocą„Dostawać()" metoda:

var value1 = QueryString.Get („FullName”);
konsola.log („Wartość FullName:” + wartość1);

Wyjście

Notatka: Używać "const queryString = new urlsearchparams (okno.Lokalizacja.szukaj)”Za uzyskanie na żywo/bieżącego adresu URL.

Po otrzymaniu bieżącego adresu URL uzyskaj z niego ciąg zapytania, utwórz instancję URLsearchParams i przekazaj do niego ciąg zapytania. Na koniec uzyskaj wartość określonego parametru w ciągu zapytania za pomocą metody get ().

Metoda 2: Pobierz wartości ciągów zapytań za pomocą URLsearchParams za pomocą metody wartości ()

Możesz także użyć „wartości ()”Metoda z interfejsem urlsearchparams w celu pobrania wartości ciągu zapytania. Pomaga uzyskać dostęp do wszystkich wartości łańcucha jednocześnie.

Przykład
Przekaż ciąg zapytania do interfejsu urlsearchparams i przechowuj go w zmiennej ”QueryString”:

var queryString = new urlsearchparams (urlqueryString);

Wywołać metodę wartości () w „Do„Pętla, aby uzyskać wszystkie wartości ciągu zapytania:

dla (wartość stałego QueryString .wartości ())
konsola.log (wartość);

Można zauważyć, że wszystkie wartości łańcuchowe zostały pobrane:

Chodzi o uzyskanie wartości ciągów zapytania w JavaScript.

Wniosek

Aby uzyskać wartości ciągów zapytania, użyj „API URL”Z„Dostawać()”Metoda i„SearchParam" atrybut. Właściwość SearchParams obiektu URL w JavaScript reprezentuje ciąg zapytania URL. Możesz także użyć „Urlsearchparams„Interfejs z„Dostawać()”Metoda lub„wartości ()" metoda. Ten blog opisał procedurę uzyskania wartości ciągu zapytania w JavaScript.