Ricavare i parametri delle QueryString con JavaScript

Pubblicato il -
Questo articolo potrebbe contenere link di affiliazione, ovvero link a pagine in cui, se viene effettuato un'acquisto, potrebbero generare una commissione a settorezero ma comunque senza incidere sul costo finale dell'oggetto acquistato. E' un modo per non avere pubblicità invasiva (che, se non avete notato, abbiamo rimosso) e nel contempo garantire al sito di continuare ad esistere.

Innanzitutto: cos’è la querystring? E’ la parte che si trova in un url dopo il punto interrogativo. Per intenderci, in un indirizzo di esempio:

www.blablabla.com/index.html?parametro1=valore&parametro2=altro_valore

La querystring è la parte ?parametro1=valore&parametro2=altro_valore dove abbiamo due parametri (o due variabili) alle quali è stato assegnato un valore. I vari parametri sono separati dal carattere ampersand (&). Questo sistema viene utilizzato per passare delle variabili da uno script all’altro o da pagina a pagina. Se in php è piuttosto semplice ricavare i parametri tramite la funzione 

$_GET['nome_parametro']

potremmo trovarci nel caso di lavorare su una pagina html, senza supporto php, la quale ha bisogno di ricavare le variabili passate con la querystring. A questo punto possiamo ricorrere ad una semplice funzione in javascript (l’ho commentata abbastanza per farvi capire cosa succede):

<script type="text/javascript">
function getQSParam(ParamName) {
  // Memorizzo tutta la QueryString in una variabile
  QS=window.location.toString(); 
  // Posizione di inizio della variabile richiesta
  var indSta=QS.indexOf(ParamName); 
  // Se la variabile passata non esiste o il parametro è vuoto, restituisco null
  if (indSta==-1 || ParamName=="") return null; 
  // Posizione finale, determinata da una eventuale &amp; che serve per concatenare più variabili
  var indEnd=QS.indexOf('&amp;',indSta); 
  // Se non c'è una &amp;, il punto di fine è la fine della QueryString
  if (indEnd==-1) indEnd=QS.length; 
  // Ottengo il solore valore del parametro, ripulito dalle sequenze di escape
  var valore = unescape(QS.substring(indSta+ParamName.length+1,indEnd)); 
  // Restituisco il valore associato al parametro 'ParamName'
  return valore; 
  }
</script>

Questo script conviene metterlo nella sezione <head> del documento html.  In un altro punto della pagina è possibile ricavare il valore delle variabili passate attraverso la querystring facendo ricorso a questa funzione. Ad esempio, supponendo di avere una pagina prova.html alla quale è stato passato il parametro ‘pippo’ con valore ‘ciao’, e cioè abbiamo richiamato la pagina in questo modo:

prova.html?pippo=ciao

Per visualizzare il valore di pippo in una parte della pagina, possiamo ricorrere a questo:

<script type="text/javascript">
document.write(getQSParam('pippo'));
</script>

Oppure se dobbiamo utilizzare il valore del parametro ‘pippo’ (preso ad esempio) in un altro script, possiamo farlo ugualmente, facilitandoci le cose assegnandolo ad una variabile:

<script type="text/javascript">
var pippo=getQSParam('pippo');
// resto dello script
// se la variabile pippo contiene un valore di tipo decimale
// potrebbe essere necessario convertirlo in float:
// var pippo=parseFloat(getQSParam('pippo'));
</script>
Se questo articolo ti è piaciuto, condividilo su un social:
      
Se l'articolo ti è piaciuto o ti è stato utile, potresti dedicare un minuto a leggere questa pagina, dove ho elencato alcune cose che potrebbero farmi contento? Grazie :)