A volte abbiamo bisogno di ottenere i valori passati tramite il metodo get attraverso la stringa di un URL sulla barra degli indirizzi del browser.
Ma la domanda è come ottenerli in JavaScript o JQuery?
Qui sto menzionando 4 modi per ottenere i valori dai parametri con javascript/jquery. Ho anche inserito nell’articolo alcuni esempi di utilizzo. Puoi usarne uno secondo la tua scelta e necessità nel JS o Jquery lato client.
Ecco 4 modi per ottenere i parametri url
<https://example.it?parametro1=valore1¶metro2=valore2>
1.Recupera i valori della stringa di query utilizzando URLSearchParams
Questo è il modo più semplice e consigliato per recuperare i valori dalla stringa contenente l’url. URLSearchParams è un’interfaccia integrata nei browser più recenti con una serie di metodi per ottenere e manipolare valori.
const url = window.location.search
//url = <https://example.it?parametro1=valore1¶metro2=valore2>
const urlParams = new URLSearchParams(url);
const param_x = urlParams.get('parametro1');
Sebbene questa interfaccia supporti un numero di browser decenti, non è disponibile per tutti, specialmente per quelli vecchi. Suggerisco di controllare la documentazione ufficiale su Mozilla e Chrome. Ha vari metodi utili da utilizzare.
2.Utilizzando le espressioni regolari (regex) in JavaScript
Ecco la funzione che decodificherà in modo sicuro i componenti URL utilizzando un’espressione regolare. Possiamo chiamare questa funzione e passare il nome del parametro della stringa di query come argomento per ottenere il valore.
<script type="text/javascript">
function getUrlParameter(name) {
name = name.replace(/[\\[]/, "\\\\[").replace(/[\\]]/, "\\\\]");
var regex = new RegExp("[\\\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\\+/g, " "));
}
var qsp = 'game',
para = getUrlParameter(qsp);
</script>
Supponiamo di avere l’URL come segue:
<http://example.com/sports?game=football>.
Se desideriamo recuperare il valore di game, possiamo passarlo alla variabile qsp come stringa e otterremo football come valore. Se il parametro non esiste, la funzione restituirà semplicemente una stringa vuota.
3.Semplice funzione javascript per salvare i parametri in un oggetto
Possiamo anche ottenere l’intera stringa di parametri come oggetto e quindi accedere al valore di un particolare parametro tramite la sua chiave.
function get_query(){
var url = document.location.href;
//url = <https://example.it?parametro1=valore1¶metro2=valore2>
var qs = url.substring(url.indexOf('?') + 1).split('&');
for(var i = 0, result = {}; i < qs.length; i++){
qs[i] = qs[i].split('=');
result[qs[i][0]] = decodeURIComponent(qs[i][1]);
}
return result;
}
Questa funzione procede in questo modo:
- Prende l’url della pagina (si può passare un stringa contenete l’url in caso di necessità dicerse)
- Tramite la manipolazione delle string e la funzione split, divide l’url nel modo seguente :
qs= ["parametro1=valore1","parametro2=valore2"];
- Tramite un ciclo for, scandisce tutti gli elementi dell’array qs appena creato e creao un oggetto result con questa forma:
result = {parametro1:"valore1",parametro2:"valore2};
4.Ottenere i parametri get di un url tramite Jquery
Se vuoi un modo jQuery per ottenere il valore di un parametro specifico, ecco la funzione:
(function($) {
$.QueryString = (function(a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i)
{
var p=a[i].split('=');
if (p.length != 2) continue;
b[p[0]] = decodeURIComponent(p[1].replace(/\\+/g, " "));
}
return b;
})(window.location.search.substr(1).split('&'))
})(jQuery);
// Esempio
var param = jQuery.QueryString["param"];
La funzione jquery appena descritta non fa altro che istanziare un’oggetto chiave valore con i parametri passati nel url, quindi chiamando JQuery,QueryString e passandogli la chiave da cercare, otteniamo il valore desiderato.
Spero che queste 4 funzioni ti aiutino a ottenere i valori dei parametri passati nel url. In caso di domande o problemi con jQuery/JavaScript, non esitare a contattarci.