Hace tiempo que llevo pensando en la forma de Pasar variables por la url en Javascript, como ya hemos visto se puede hacer en PHP de forma muy sencilla, pero javascript no tiene integrada esa funcionalidad.
Pero podemos crear una función que recoja las variables en un array desde la url y de ese modo podemos trabajar de forma muy similar a como se hace en PHP.
Está función sería la siguiente:
/**
* Funcion que captura las variables pasados por GET
* Devuelve un array de clave=>valor
*/
function getGET()
{
// capturamos la url
var loc = document.location.href;
// si existe el interrogante
if(loc.indexOf('?')>0)
{
// cogemos la parte de la url que hay despues del interrogante
var getString = loc.split('?')[1];
// obtenemos un array con cada clave=valor
var GET = getString.split('&');
var get = {};
// recorremos todo el array de valores
for(var i = 0, l = GET.length; i < l; i++){
var tmp = GET[i].split('=');
get[tmp[0]] = unescape(decodeURI(tmp[1]));
}
return get;
}
}
De esta forma convertimos la parte que mantiene las variables en la url en un array clave=>valor.
Ahora lo que deberíamos de hacer es o bien recorrerlo para trabajar con el array o bien guardar los valores como si se tratase de PHP
window.onload = function()
{
// Cogemos los valores pasados por get
var valores=getGET();
if(valores)
{
//recogemos los valores que nos envia la URL en variables para trabajar con ellas
var nombre = valores['nombre'];
var edad = valores['edad'];
// hacemos un bucle para pasar por cada indice del array de valores
for(var index in valores)
{
document.write("clave: "+index+" - valor: "+valores[index]);
}
document.write('
<hr>
Te llamas '+ nombre);
document.write(' Tu edad es '+ edad);
}else{
// no se ha recibido ningun parametro por GET
document.write("No se ha recibido ningún parámetro");
}
}
En este ejemplo lo único que tenemos que cambiar son los índices según deseemos y utilizar las variables como nos plazca, de hecho podemos verlo en funcionamiento de forma completa para la siguiente url:
recibir.html?nombre=Miguel&edad=37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
/**
* Funcion que captura las variables pasados por GET
* Devuelve un array de clave=>valor
*/
function getGET()
{
// capturamos la url
var loc = document.location.href;
// si existe el interrogante
if(loc.indexOf('?')>0)
{
// cogemos la parte de la url que hay despues del interrogante
var getString = loc.split('?')[1];
// obtenemos un array con cada clave=valor
var GET = getString.split('&');
var get = {};
// recorremos todo el array de valores
for(var i = 0, l = GET.length; i < l; i++){
var tmp = GET[i].split('=');
get[tmp[0]] = unescape(decodeURI(tmp[1]));
}
return get;
}
}
window.onload = function()
{
// Cogemos los valores pasados por get
var valores=getGET();
if(valores)
{
//recogemos los valores que nos envia la URL en variables para trabajar
//con ellas
var nombre = valores['nombre'];
var edad = valores['edad'];
// hacemos un bucle para pasar por cada indice del array de valores
for(var index in valores)
{
document.write(" clave: "+index+" - valor: "+valores[index]);
}
document.write('
<hr>
Te llamas '+ nombre);
document.write(' Tu edad es '+ edad);
}else{
// no se ha recibido ningun parametro por GET
document.write("No se ha recibido ningún parámetro");
}
}
</script>
</body>
</html>
Aquí podemos ver cómo podemos capturar las variables y guardarlas dentro de nuestro script, considerando que los indices nombre y edad nos los da la url y deberíamos cambiarlos dependiendo del nombre que tengan en cada caso, pudiendo ser todos los que necesitemos.
Lo que si tenemos que tener en cuenta es que las variables que recogemos son siempre strings, por lo que si trabajamos con valores numéricos tenemos que convertir las variables en numericas.
edad = parseInt(edad);
De esta forma ya podemos trabajar también con números.
Espero que os haya servido y que os funcione en vuestros proyectos.
Hola! Como estas? mi nombre es Gastón y estoy empezando con esto de javascript y me gustaria saber si me puedes dar una mano. te explico un poco de que va;
estoy haciendo un sitio de inmobiliaria y el filtro busca estupendamente bien, ahora el tema es que no me figura en la url lo que yo filtro..
necesito saber como hago para pasar los elementos que se seleccionaron en el filtro a la URL.
lo que tengo en la URL ahora:
inmobiliariaD.com
lo que quiero luego de seleccionado los filtros:
inmobiliariaD.com?tipoDeOperacion=venta&dormitorios=2&banos=2
desde ya muchas gracias! 😀
Hola, pues para crear la url bien lo haces usando GET get en el formulario, o bien por medio de una funcion en js donde recojas las variables y vrees la url o pasas las opciones por pkp ya sea usando ajax o de forma directa…
Entiendo q lo que encesitas es que el usuario marque unas opciones y se genere una url que al enviar el formulario se envie a un archivo que recoja las opciones, no?
hola! muchas gracias por tu respuesta…
pkp o ajax es medio chino, no se ni que es eso… como indicaba antes estoy aprendiendo y solo debo usar JavaScript.
Lo que yo necesito es que cuando el usuario seleccione los filtros y de en aplicar.. en la url se muestran esos filtros aplicados, tengo una funcion que recorre todos los filtros y evalúa si esta seleccionado o no y tambien ya muestra en pantalla las propiedades que cumplen con esos valores…
hay una forma de pasarle el resultado que da esa funciona a la url?
no estoy usando GET en el formulario porque el profesor me dijo que no lo hiciera ya que es en local y no es necesario…
tengo algo que te puede servir, escribeme un mail y te lo mando… (y ya que estamos darle a algunos anuncios de la web no estaria mal jajajaja)
Pasar variables por la url en Javascript https://t.co/VkS55scQaq
Pasar variables por la url en Javascript https://t.co/VHrM3RglVD https://t.co/cG1VKjwLK1
Pasar variables por la url en Javascript https://t.co/mybjZzcAz5
«Pasar variables por la url en Javascript» https://t.co/FUzcVhb9be