Si possono ottenere i valori dei parametri GET in JavaScript? La risposta è “sì” e lo vediamo assieme in questo articolo!
Durante la realizzazione di un servizio web, è altamente probabile che ti sia capitato più volte di gestire e avere a che fare con i parametri GET. Può anche capitare di dover prendere i valori di questi parametri e trattarli con JavaScript.
Perciò, come possiamo fare?
Partiamo da un esempio.
I parametri GET vanno a comporre il seguente URL:
https://sitoweb.com?par1=22&par2=99&par3=66
Se non lo sapessi, JavaScript mette a disposizione un oggetto base che è “location”.
Questo oggetto si compone di due attributi molto utili.
Il primo è “href”: esso restituisce l’intero URL della pagina attuale.
Per intenderci, stando all’esempio di prima:
window.location.href => contiene "https://sitoweb.com?par1=22&par2=99&par3=66"
Tuttavia, c’è un altro attributo che è un po’ più diretto e fa al caso nostro.
Sto parlando di “search”:
window.location.search => contiene "?par1=22&par2=99&par3=66"
Quindi, abbiamo capito come ottenere i parametri GET in JavaScript della pagina, ma non i valori.
… In realtà sì, ma non possiamo farci andare bene una stringa per intero dico bene?
In qualche modo dobbiamo spaccarla.
La composizione dei parametri GET
I parametri GET all’interno di un URL, vengono mappati in questo modo:
?PARAMETRO1=VALORE-PARAMETRO1&PARAMETRO2=VALORE-PARAMETRO2&PARAMETRON=VALORE-PARAMETRON
Perciò, tutto ciò che segue il punto di domanda (?) nell’URL sono i parametri GET con i loro rispettivi valori.
I parametri GET, vengono divisi l’uno dall’altro con il carattere ampersand.
Quella parola strana in pseudo tecnichese rappresenta questo carattere: “&”.
Infine, per chiudere questa parentesi tecnica, il nome del parametro e il suo valore vengono divisi dall’uguale (=).
La soluzione per ottenere i valori dei parametri GET in JavaScript
Chiarito come ottenere i parametri, possiamo usare una soluzione come questa per ottenere non solo i parametri GET, ma anche i valori in JavaScript:
//Valorizziamo questa variabile con la sottostringa di "search" togliendo il primo carattere ovvero "?", non ce ne facciamo nulla
var parametriGET=window.location.search.substring(1);
//Presi i parametri "grezzi", li dividiamo creando un array tramite il carattere "&"
var parametriDivisi=parametriGET.split("&");
//Ci creiamo un array di oggetti ciclando l'array di prima
//Questi oggetti conterranno il nome del parametro e il suo rispettivo valore.
var parametriVeri=[];
parametriDivisi.forEach(function(parametro){
//Dividiamo in due la stringa intera che rappresenta il parametro
var nomeParametro=parametro.split("=")[0];
//La funzione split genera un array da una stringa
//Quindi la prima cella conterrà il nome (prima dell'uguale)
//La seconda, il valore (dopo l'uguale)
var valoreParametro=parametro.split("=")[1];
parametriVeri.push({"nome":nomeParametro,"valore":valoreParametro});
});
//Ecco a noi i nostri parametri ben divisi e valorizzati!
console.log(parametriVero);
