Um URL (Uniform Resource Locator) é o endereço de uma página da web na internet. Além de apenas apontar para uma página, URLs também podem conter informações que podem ser usadas para modificar uma página da web. Por exemplo, podemos usar um URL de página para rolar para uma determinada seção em uma página ou definir um token de usuário para autenticação.
Neste tutorial, veremos como usar URLs para atualizar o conteúdo em uma página da web. Especificamente, veremos como usar parâmetros de URL para modificar uma página usando o número da página e filtros aplicados.
Um pouco sobre parâmetros de URL
Parâmetros de URL são informações extras adicionadas ao final de uma URL e podem ser usados para transmitir dados dentro da URL.
Os parâmetros de URL são especialmente úteis em páginas que exibem muitos dados, pois permitem que o usuário mantenha os dados da página da maneira que preferir. Armazenar dados em URLs também permite que links específicos sejam enviados para fornecer uma experiência personalizada para um usuário.
Para armazenar o número da página como um parâmetro de URL, usaremos um tutorial anterior sobre paginação:
No tutorial de Paginação, adicionamos novos elementos à página com base em qualquer número de página em que o usuário clica. O conteúdo da página foi atualizado usando JavaScript para que as alterações na página não afetassem a estrutura da URL. No entanto, isso significava que não havia como rastrear qual página o usuário estava visitando no momento. Por exemplo, se um usuário estivesse navegando na página 4 e decidisse atualizar a página, ele seria levado de volta para a página 1.
Então, neste tutorial, atualizaremos o script de paginação para usar um parâmetro de URL para armazenar a página atual e, em seguida, usar esse valor de parâmetro para exibir qual conteúdo da página deve ser exibido.
Como estamos trabalhando com URLs, a demonstração é melhor visualizada em um navegador real usando este link https://tutsplus.github.io/jemima-tutorials/page-params.html
Atualizando parâmetros de URL
Primeiro, vamos escrever uma função para atualizar a estrutura da URL quando um número de página é clicado. Para atualizar a URL da página, primeiro precisamos obter a URL atual. Podemos fazer isso usando o window.location variável.
1 |
const currentUrl = new URL(window.location) |
O URL() Constructor converte a string window.location em um objeto URL que podemos atualizar.
Depois de termos o objeto URL, podemos usar set() método na URL searchParams para atualizar os parâmetros. O set() O método aceita parâmetros de nome e valor e os codifica dentro da URL.
1 |
currentUrl.searchParams.set('page', pageNumber) |
Em seguida, queremos atualizar a URL real na barra de endereço. Também queremos que nossa URL atualizada imite o comportamento padrão usual do navegador, por exemplo, se um usuário usar o botão voltar, ele deve ser levado de volta à página anterior em que clicou e, se clicar no botão atualizar, deve ver a mesma página.
Podemos conseguir isso usando location.assign – este método atualiza o estado do histórico do navegador e recarrega a página com o URL do navegador atualizado.
1 |
location.assign(currentUrl) |
Para obter mais informações sobre as diferentes maneiras de atualizar URLs usando JavaScript, confira este artigo sobre como alterar a URL em JavaScript: redirecionamento
Nossa função URL finalizada se parece com isso:
1 |
const updatePageParams = (pageNumber) => { |
2 |
const currentUrl = new URL(window.location) |
3 |
currentUrl.searchParams.set('page', pageNumber) |
4 |
location.assign(currentUrl) |
5 |
}
|
Podemos passar esta função para o manipulador de cliques dos botões de paginação para que o parâmetro da página seja atualizado toda vez que um botão for clicado:
1 |
const setCurrentPage = (currentPage) => { |
2 |
updatePageParams(currentPage); |
3 |
...
|
4 |
};
|
O setCurrentPage A função é chamada quando os botões de paginação são clicados para que os parâmetros de URL sejam atualizados sempre.
Atualizando conteúdo com base em parâmetros
Agora que temos nossa URL atualizada sempre que a página for alterada, precisaremos escrever uma função para exibir a página correta com base no valor da URL.
No tutorial de paginação, definimos uma variável global currentPage que era responsável por manter o estado atual da página, então esse é o valor que atualizaremos com base nos parâmetros. Definiremos a variável currentPage como 1 por padrão.
Então, obteremos o objeto URL da página atual e usaremos o get() método para recuperar o parâmetro que precisamos.
1 |
const currentUrl = new URL(window.location) |
2 |
const page = currentUrl.searchParams.get('page') |
Se a URL contiver uma consulta de página, atualizaremos nossa variável global currentPage para o valor da página na URL. É assim que a função finalizada se parece:
1 |
const getPageParams = () => { |
2 |
const currentUrl = new URL(window.location) |
3 |
const page = currentUrl.searchParams.get('page') |
4 |
|
5 |
if (!page) { |
6 |
return
|
7 |
}
|
8 |
|
9 |
currentPage = Number(page) |
10 |
}
|
Precisaremos chamar esta função sempre que a página for recarregada para que possamos fazer isso usando um ouvinte de eventos:
1 |
window.addEventListener("load", () => { |
2 |
getPageParams(); |
3 |
setCurrentPage(currentPage); |
4 |
}
|
Agora, quando a página for carregada, a variável currentPage será atualizada para o valor na URL ou permanecerá como 1 se não houver valor de URL.
No entanto, como estamos recarregando a página atualizando o URL toda vez que o setCurrentPage() for chamado, precisaremos incluir uma condição para evitar que a página fique presa em um loop.
1 |
const setCurrentPage = (currentPage, onload = false) => {
|
2 |
if (!onload) {
|
3 |
updatePageParams(currentPage); |
4 |
} |
5 |
} |
Adicionaremos um onload parâmetro com um valor padrão de falso para o setCurrentPage() método e somente atualizar a URL da página se o onload parâmetro é falso. Em seguida, atualizaremos a função no ouvinte de eventos:
1 |
window.addEventListener("load", () => { |
2 |
getPageParams(); |
3 |
setCurrentPage(currentPage, true); |
4 |
}
|
E com isso conseguimos modificar com sucesso o conteúdo da página usando uma URL.
Adicionando vários parâmetros a uma URL
No entanto, em situações da vida real, estruturas de URL tendem a ser mais complexas do que isso. É possível ter múltiplos parâmetros anexados a uma URL, como abaixo:
Vamos dar uma olhada em como podemos passar várias consultas para uma URL usando outro tutorial:
A demonstração final pode ser vista aqui https://tutsplus.github.io/jemima-tutorials/filter-params.html e o código completo pode ser visto aqui https://github.com/tutsplus/jemima-tutorials/blob/main/filter-params.html
Atualizaremos o recurso de vários filtros para passar os filtros selecionados para a URL e também filtrar a página na recarga com base nos filtros na URL.
Para esse recurso, usaremos o append() método em vez do set() método. O set() método substitui uma chave pelo valor que está sendo passado enquanto o append() O método cria uma nova instância do par chave-valor dentro da URL.
1 |
currentUrl.append('key1', 'value1') |
2 |
// https://jemimaabu.github.io/tutorials/filter-params.html?key1=value1
|
3 |
|
4 |
currentUrl.append('key1', 'value2') |
5 |
// https://jemimaabu.github.io/tutorials/filter-params.html?key1=value1&key1=value2
|
6 |
|
7 |
currentUrl.set('key1', 'value3') |
8 |
// https://jemimaabu.github.io/tutorials/filter-params.html?key1=value3
|
Outra mudança do método anterior é que, em vez de atualizar o histórico de estado e recarregar a página, apenas substituiremos a URL sem recarregar. Como estamos selecionando vários filtros e fazendo chamadas assíncronas para buscar os dados, seria ruim para o desempenho se estivéssemos recarregando a página toda vez que a URL fosse atualizada.
Neste caso, em vez de usar location.assignusaremos history.replaceState() em vez disso. O history.replaceState() O método nos permite modificar a URL dentro da barra de endereço sem precisar recarregar a página. Ele também não armazena a URL atualizada dentro do histórico, então se o usuário pressionar o botão voltar, ele não será levado para o estado de filtro anterior.
O replaceState() O método aceita três parâmetros: data, unused e url. O parâmetro principal que precisamos é url, pois é onde podemos passar nossa URL atualizada para que os outros dois parâmetros possam ser nulos.
Nossa função de URL atualizada agora se parece com isto:
1 |
const updateFilterParams = (filter, value) => { |
2 |
const currentUrl = new URL(window.location) |
3 |
currentUrl.searchParams.append(filter, value) |
4 |
history.replaceState({}, '', currentUrl) |
5 |
}
|
Excluindo Parâmetros da URL
Outra função que precisaremos incluir é remover os parâmetros da URL quando um filtro for desmarcado. Podemos fazer isso usando o delete() método.
1 |
const removeFilterParams = (filter, value) => { |
2 |
const currentUrl = new URL(window.location) |
3 |
currentUrl.searchParams.delete(filter, value) |
4 |
history.replaceState({}, '', currentUrl) |
5 |
}
|
O método delete() aceita dois parâmetros: name e value. Se nenhum valor for fornecido, o método delete removerá todas as instâncias desse name da URL.
1 |
// https://jemimaabu.github.io/tutorials/filter-params.html?key1=value1&key1=value2&key1=value3
|
2 |
|
3 |
currentUrl.delete('key1', 'value2') |
4 |
// https://jemimaabu.github.io/tutorials/filter-params.html?key1=value1&key1=value3
|
5 |
|
6 |
currentUrl.delete('key1') |
7 |
// https://jemimaabu.github.io/tutorials/filter-params.html
|
Em seguida, podemos passar essas duas funções para o manipulador de eventos de clique do botão de filtro:
1 |
const handleButtonClick = (e, key, param) => { |
2 |
const button = e.target; |
3 |
const buttonState = button.getAttribute("data-state"); |
4 |
if (buttonState == "inactive") { |
5 |
updateFilterParams(key, param); |
6 |
} else { |
7 |
removeFilterParams(key, param); |
8 |
}
|
9 |
};
|
Portanto, se o botão for clicado primeiro, a URL será atualizada com o filtro selecionado, mas se o botão for desmarcado, o parâmetro será removido da URL.
Obtendo vários parâmetros em uma URL
Em seguida, queremos atualizar o conteúdo na página com base nos parâmetros de URL. Precisaremos atualizar os botões de filtro para corresponder aos filtros na URL e, então, filtrar o botão na página.
Ao recuperar vários parâmetros, usamos o getAll() método, que retorna uma matriz de todos os valores atribuídos àquela chave na URL.
1 |
// https://jemimaabu.github.io/tutorials/filter-params.html?key1=value1&key1=value2&key1=value3 |
2 |
|
3 |
currentUrl.getAll('key1')
|
4 |
// ['value1', 'value2', 'value3'] |
A função de criação de filtro agora se parece com isto:
1 |
const createFilter = (key, param) => { |
2 |
const currentUrl = new URL(window.location) |
3 |
const filterKey = currentUrl.searchParams.getAll(key) |
4 |
if (filterKey.includes(param)) { |
5 |
filterButton.setAttribute("data-state", "active"); |
6 |
} else { |
7 |
filterButton.setAttribute("data-state", "inactive"); |
8 |
}
|
9 |
};
|
Em seguida, precisaremos buscar os parâmetros de URL e usá-los para atualizar os dados exibidos na página. No tutorial do recurso multifiltro, definimos uma função handleFilterPosts() que é o que usaremos para atualizar a página com base nos filtros na URL.
Também podemos verificar se a URL contém algum parâmetro antes de chamar a função, usando o size propriedade:
1 |
const getFilterParams = () => { |
2 |
const currentUrl = new URL(window.location) |
3 |
|
4 |
if (currentUrl.searchParams.size <= 0) { |
5 |
return
|
6 |
}
|
7 |
|
8 |
currentUrl.searchParams.forEach((value, key) => { |
9 |
currentFilters[key].push(value) |
10 |
});
|
11 |
|
12 |
handleFilterPosts(currentFilters); |
13 |
}
|
Nós chamaremos o getFilterParams() função em nossa solicitação de busca para que a página seja atualizada com os filtros selecionados assim que os dados forem obtidos. Em um aplicativo de larga escala, o filtro provavelmente seria manipulado no lado do servidor, então precisaríamos apenas passar os filtros como parâmetros para a solicitação de busca.
1 |
fetch( |
2 |
'https://...' |
3 |
).then(async (response) => { |
4 |
...
|
5 |
getFilterParams() |
6 |
});
|
E isso é tudo o que precisamos. Agora podemos atualizar e modificar o conteúdo da página com base em URLs!
[ad_2]
