JavaScript

Como pegar parâmetros GET da URL com JavaScript

18 de julho de 2022

Como pegar parâmetros GET da URL com JavaScript

Neste artigo você vai aprender a como pegar parâmetros GET da URL com JavaScript, utilizando um objeto muito interessante!

pegar parâmetros GET da URL com JavaScript capa

Fala programador(a), beleza? Neste artigo você vai aprender a como resgatar os parâmetros da URL com JS!

Estes parâmetros são também conhecidos como query string, que é caracterizado por tudo que fica após a ? na URL

Cada parâmetor é separado por um &, então podemos ter mais um também

O nosso exemplo será a URL:

https://www.meusite.com.br/produtos?categoria=livros&autor=Augusto

Aqui podemos dizer que há uma busca por produtos que sejam livros e com um dos autores sendo uma pessoa com nome de Augusto

Podemos resgatar esta query string com JavaScript pelo seguinte código:

const urlParams = new URLSearchParams(window.location.search);

const products = urlParams.get("produtos") // livros

const author = urlParams.get("autor") // Augusto

Aqui temos três variáveis, a primeira inicializa o objeto com base na parte de pesquisa da URL, que é window.location.search

Depois obtemos cada um dos valores em variáveis distintas

E assim resgatamos os parâmetros que foram enviados por uma requisição GET!

Conclusão

No artigo de hoje você viu como pegar parâmetros GET da URL com JavaScript

Utilizamos a classe URLSearchParams para criar uma nova instância dele baseada na URL atual

Ela possui métodos que podem resgatar os valores da URL individualmente, com o get

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos

Subscribe
Notify of
guest

0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x