Home + Webmaster + Servizi utili + Manuali + Manuale Javascript + QueryString

QueryString

Le QueryString sono un sistema per passare parametri all'indirizzo di una pagina Web, accodando alla fine del file corrente una serie di informazioni, secondo le quali, è possibile ottenere, nell'ambito della stessa pagina, risultati diversi.

Una QueryString semplice è composta da una variabile ed il rispettivo valore, ad esempio:

?id=1

è una QueryString, in cui id è la variabile e 1 è il suo valore corrente.

Le QueryString sono composte anche da una serie di caratteri speciali: 

? divide l'estensione del file dalla prima variabile della QueryString
& divide la prima variabile della QueryString da un'eventuale seconda in poi
= attribuisce alla variabile il suo valore

Javascript, essendo un linguaggio lato client, non supporta nativamente questo metodo, ma dispone della proprietà location.search, con la quale è possibile catturare la QueryString passata alla pagina.

Se ad esempio scrivo:

document.write(location.search);

ottengo in output 

?id=55

avendo, effettivamente, questa pagina dei parametri passati in QueryString.

E' possibile sfruttare questa proprietà per gestire questo tipo di metodo anche lato client, vediamo come.

Iniziamo col creare un file, ad esempio index.html in cui impostiamo i seguenti link, che punteranno al file querystring.html, con diverse QueryString: 

<a href="querystring.html?id=1">Pagina # 1</a>
<a href="querystring.html?id=2">Pagina # 2</a>
<a href="querystring.html?id=3">Pagina # 3</a>

Vediamo cosa scrivere nel file querystring.html: 

<html>
 <head>
 <title>QueryString con Javascript</title>
  <script language="javascript">
   <!--
    // Inizializzo la QueryString
    var querystring = location.search;
   //-->
  </script>
 </head>
<body>

<script language="javascript">
 <!--
  if (querystring == "?id=1") {
// Definisco l'azione nel caso in cui il valore della QueryString sia 1
      document.write("Stai visitando la pagina numero uno!");
  }
  else if (querystring == "?id=2") {
      document.write("Stai visitando la pagina numero due!");
  }
  else if (querystring == "?id=3") {
      document.write("Stai visitando la pagina numero tre!");
  }
  else {
      document.write("ERRORE 404 - File non trovato!");
  }
 //-->
</script>

</body>
</html>

E così via per tutte le pagine che vogliamo!

Autore: Luca Ruggiero