Come ottenere i valori dei parametri GET in JavaScript

di Lorenzo Neri
787 visualizzazioni

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

Continua a scoprire di più con questi articoli!

2 commenti

Mauro 15/09/2022 - 15:51

Ciao, mi chiamo Mauro e ho trovato questa guida molto importante per me. Ti chiedo un’altra cosa se posso che penso centri un po’ con l’argomento…
Premessa… io sono autodidatta e capisco poco poco anche se questo mondo mi affascina, quindi perdonami il modo che ho di spiegarmi perchè non so bene i termini…
Quello che mi piacerebbe capire con javascript è come poter leggere ed analizzare, come nel tuo esempio, dei valori presenti in un file txt scritti da un altro programma. Mi spiego meglio, io su un server ho un file data.txt che praticamente ha scritto in una riga “1 2 1 1 1 3 5 …. e così via” praticamente numeri spaziati che vengono scritti da un’altra pagina web.
Come potrei leggere quei numeri e compiere azioni in base al loro valore (per esempio se è 1 scrivi “uno” se è 2 “due” a schermo) ?
Eventualmente si potrebbe anche modificarli sempre con lo stesso programma?
Non ti chiedo la pappa pronta sia ben chiaro ma molti spunti perchè non ho conoscenze ma il bisogno di provare a fare questa cosa….
grazie in anticipo
Mauro

Rispondi
Lorenzo Neri 15/09/2022 - 16:28

Ciao Mauro e grazie per il tuo commento.

Sono ben felice che ti sia stato utile il mio articolo!

In merito al tuo cruccio mi pare di capire che tu desideri prendere in input il contenuto di questo file presente sul server affinché esso sia manipolato poi a posteriori da Javascript.

La cosa è fattibile e ti lascio in input diversi articoli che ti potranno essere utili!

https://lorenzoneri.com/come-passare-variabili-e-dati-dal-php-al-javascript/
https://lorenzoneri.com/come-eseguire-upload-asincroni-di-file-con-javascript/
https://lorenzoneri.com/api-cosa-sono-come-funzionano/

Ci sono un po’ vari ingredienti che it possono essere di aiuto 🙂

Un saluto,

Lorenzo

Rispondi

Lascia un commento

Questo sito potrebbe fare uso di cookie e siccome l'UE mi obbliga a fartelo presente, eccoti il classico banner dove puoi decidere come gestirli. Accetta Leggi di più