sábado, 14 de diciembre de 2013

Como obtener parámetros get en la url con Javascript



Interesante: Vídeo Tutorial de Javascript, aprende a programar Javascript desde cero.

Bienvenid@s, hoy os voy a mostrar una función muy útil para obtener el valor de los parámetros GET, es decir, aquellos parámetros que van en la url, por ejemplo ...

http://www.loquesea.com/?id=1&lenguaje=javascript


En un principio nunca me había planteado tal posibilidad, pero a través de expresiones regulares y haciendo uso de algunas funciones Javascript es posible, el hecho de poder manejar los parámetros get con javascript puede dotar de bastante dinamismo a un blog de blogger o wordpress, es decir a páginas estáticas que no pueden hacer uso de PHP para recibir variables, lógicamente con las limitaciones que tiene Javascript, pero con un poco de imaginación se pueden hacer cosas interesantes, como redirigir a un usuario tras contestar un test, por ejemplo ...

http://loquesea.com/?mensaje=error

Y posteriormente capturar el parámetro mensaje ...

if ($_GET("mensaje") == "error")
{
// Lo que quieras hacer
}

En esta página he integrado la función para que veáis un ejemplo.

Haz click en el siguiente enlace para recibir un mensaje de enhorabuena ... http://jquery-manual.blogspot.com.es/2013/12/como-obtener-parametros-get-con.html?mensaje=ok

Aquí os dejo el código de la función $_GET ...

<!DOCTYPE HTML>
<html>
<head>
<title>Como obtener parámetros get con Javascript</title>

<script>
function $_GET(param)
{
/* Obtener la url completa */
url = document.URL;
/* Buscar a partir del signo de interrogación ? */
url = String(url.match(/\?+.+/));
/* limpiar la cadena quitándole el signo ? */
url = url.replace("?", "");
/* Crear un array con parametro=valor */
url = url.split("&");

/* 
Recorrer el array url
obtener el valor y dividirlo en dos partes a través del signo = 
0 = parametro
1 = valor
Si el parámetro existe devolver su valor
*/
x = 0;
while (x < url.length)
{
p = url[x].split("=");
if (p[0] == param)
{
return decodeURIComponent(p[1]);
}
x++;
}
}


alert($_GET("id"));
alert($_GET("lenguaje"));
</script>

</head>
<body>
<h1><a href="http://jquery-manual.blogspot.com" target="_blank">Jquery Manual</a></h1>
<p>Introduce parámetros GET a la url y captura su valor, por ejemplo ... ?id=1&lenguaje=Javascript</p>
</body>
</html>