Come ottenere i valori dei parametri GET in JavaScript

Si possono ottenere i valori dei parametri GET in JavaScript? La risposta è “sì” e lo vediamo assieme in questo articolo!

Ciao mi chiamo Lorenzo Neri e sono un informatico: realizzo contenuti per aiutare le persone a padroneggiare l’arte del nuovo millennio, ovvero l’informatica!

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);