Aggiornare il contenuto della pagina Web in base ai parametri URL
Oggi voglio condividere con voi un interessante esempio di come aggiornare dinamicamente il contenuto di una pagina web in base ai parametri presenti nell'URL. Utilizzeremo JavaScript per gestire questa funzionalità in modo semplice ed efficace.
Immaginate di avere una pagina web che visualizza diversi prodotti in base alla categoria selezionata dall'utente; utilizzando i parametri presenti nell'URL, possiamo facilmente mostrare elementi diversi in base alla scelta.
Vediamo un esempio di codice reale:
<select id="categoria" onchange="cambiaCategoria()"> <option value="">Seleziona una categoria</option> <option value="elettronica">Elettronica</option> <option value="abbigliamento">Abbigliamento</option> <option value="giocattoli">Giocattoli</option> </select> <h2>Prodotti</h2> <div id="prodotti"></div> <script src="script.js"></script>
A questo codice corrisponderà un insieme di istruzioni javascript:
document.addEventListener("DOMContentLoaded", () => {
const params = new URLSearchParams(window.location.search);
const categoriaSelezionata = params.get('categoria');
if (categoriaSelezionata) {
document.getElementById('categoria').value = categoriaSelezionata;
mostraProdotti(categoriaSelezionata);
}
});
function cambiaCategoria() {
const categoria = document.getElementById('categoria').value;
// Aggiorniamo l'URL con la nuova categoria selezionata
const nuovaUrl = window.location.origin + window.location.pathname +
'?categoria=' + encodeURIComponent(categoria);
window.history.pushState({}, '', nuovaUrl);
mostraProdotti(categoria);
}
function mostraProdotti(categoria) {
const prodottiDiv = document.getElementById('prodotti');
prodottiDiv.innerHTML = ''; // Pulisci i prodotti visualizzati
const prodotti = {
elettronica: ['Smartphone', 'Televisore', 'Cuffie'],
abbigliamento: ['Maglietta', 'Jeans', 'Giacca'],
giocattoli: ['Robot', 'Puzzle', 'Macchinina']
};
const prodottiDaMostrare = prodotti[categoria] || [];
if (prodottiDaMostrare.length === 0) {
prodottiDiv.innerHTML = '<p>Nessun prodotto per questa categoria.</p>';
} else {
prodottiDaMostrare.forEach(prodotto => {
const prodottoElement = document.createElement('div');
prodottoElement.textContent = prodotto;
prodottiDiv.appendChild(prodottoElement);
});
}
}
Per fare ciò, abbiamo utilizzato il metodo URLSearchParams per ottenere i parametri presenti nell'URL e quindi utilizzare questi parametri per filtrare e visualizzare i contenuti desiderati. In questo modo, l'utente potrà selezionare una categoria specifica e vedere immediatamente i prodotti corrispondenti senza alcuna interruzione. Il costrutto window.history.pushState infatti si assicura che la pagina non venga ricaricata.
Ecco come potrebbero apparire gli URL in base alle selezioni dell'utente:
- Se l'utente seleziona "Elettronica": https://esempio.com/?categoria=elettronica
- Se passa a "Abbigliamento": https://esempio.com/?categoria=abbigliamento
Questo esempio dimostra come JavaScript possa essere utilizzato in modo creativo per migliorare l'esperienza dell'utente sul web. Spero che questo vi ispiri a sperimentare con nuove funzionalità e a creare pagine web sempre più interattive e dinamiche. Buon coding!
Condividi su Facebook // Dai un like // Assegna una lettura
Precedente - Torna alla lista - Successivo