Normalmente se suelen mandar parámetros desde un formulario en HTML / XHTML a un script escrito en un lenguaje de lado de servidor (JSP, PHP, ASP, ...), pero en alguna ocasión tendremos que llamar a un HTML / XHTML pasándole parámetros por URL (es decir, los parámetros son enviados usando el método GET).
En JavaScript podemos recurrir al objeto del navegador location y a su método search. Si una URL con parámetros tiene la forma:
Para esta URL, el método location.search devuelve la cadena:
Donde cada parámetro está separado por el caracter &, y para cada párametro se usa el carácter = para separar el nombre del valor.
A continuación pongo un ejemplo completo de lectura de parámetros desde URL usando JavaScript, y usar dos parámetros en concreto (uno llamado ancho y otro alto) para hacer un recuadro con esas dimensiones.
index.html
[sourcecode language="html"]
Leer parámetros desde JavaScript
<script type="text/javascript" src="script.js"></script>
La URL es:
El valor del parámetro ANCHO es:
El valor del parámetro ALTO es:
[/sourcecode]
script.js
[sourcecode language="javascript"]
function Init(){
var url = String(window.location.href);
var params = String(window.location.search);
var aux1 = new Array();
var aux2 = new Array();
var cont = 0;
var tot = 0;
//si hay parametros
if (params.length > 0){
//eliminamos el primer caracter '?'
params = params.substr(1);
//insertamos en un array las parejas nombre=valor
aux1 = params.split("&");
tot = aux1.length;
for (cont = 0; cont < tot; cont++){
//separo el nombre del valor
aux2 = aux1[cont].split("=");
//trabajo con cada parámetro
if (aux2[0].toLowerCase() == "ancho"){
document.getElementById("ancho").innerHTML = aux2[1];
document.getElementById("cuadro").style.width = aux2[1];
}
else if (aux2[0].toLowerCase() == "alto"){
document.getElementById("alto").innerHTML = aux2[1];
document.getElementById("cuadro").style.height = aux2[1];
}
}
}
else{
alert("No hay parámetros en la URL");
}
document.getElementById("url").innerHTML = url;
}
[/sourcecode]
En JavaScript podemos recurrir al objeto del navegador location y a su método search. Si una URL con parámetros tiene la forma:
http://elbitcampeador.wordpress.com?parametro1=valor1¶metro2=valor2Para esta URL, el método location.search devuelve la cadena:
?parametro1=valor1¶metro2=valor2Donde cada parámetro está separado por el caracter &, y para cada párametro se usa el carácter = para separar el nombre del valor.
A continuación pongo un ejemplo completo de lectura de parámetros desde URL usando JavaScript, y usar dos parámetros en concreto (uno llamado ancho y otro alto) para hacer un recuadro con esas dimensiones.
index.html
[sourcecode language="html"]
Leer parámetros desde JavaScript
<script type="text/javascript" src="script.js"></script>
La URL es:
El valor del parámetro ANCHO es:
El valor del parámetro ALTO es:
[/sourcecode]
script.js
[sourcecode language="javascript"]
function Init(){
var url = String(window.location.href);
var params = String(window.location.search);
var aux1 = new Array();
var aux2 = new Array();
var cont = 0;
var tot = 0;
//si hay parametros
if (params.length > 0){
//eliminamos el primer caracter '?'
params = params.substr(1);
//insertamos en un array las parejas nombre=valor
aux1 = params.split("&");
tot = aux1.length;
for (cont = 0; cont < tot; cont++){
//separo el nombre del valor
aux2 = aux1[cont].split("=");
//trabajo con cada parámetro
if (aux2[0].toLowerCase() == "ancho"){
document.getElementById("ancho").innerHTML = aux2[1];
document.getElementById("cuadro").style.width = aux2[1];
}
else if (aux2[0].toLowerCase() == "alto"){
document.getElementById("alto").innerHTML = aux2[1];
document.getElementById("cuadro").style.height = aux2[1];
}
}
}
else{
alert("No hay parámetros en la URL");
}
document.getElementById("url").innerHTML = url;
}
[/sourcecode]
Despues de muchas pruebas no consegui que funcionara con javascript, lo he hecho al final con php que es muchisimo mas facil por lo que he visto. Solo con añadir donde queramos de nuestro codigo sale andando sin mayores problems!!
ResponderEliminarEsta bien esto...
ResponderEliminarlo que se come despues de añadir es php echo $_GET['ancho'];
con sus correspondientes <? y al contrario al final obviamente.
A mi tampoco me funcionaba pero reemplacé el
ResponderEliminarpor y anduvo perfecto.
Después de usar ASP/JavaScript/MySQL ahora me siento perdida sin mi Request.QueryString !!! Gracias por el código !
Lo siento, no salio el texto completo ... lo que reemplacé es el BODY por BODY ONLOAD="Init();"
ResponderEliminar¡Gracias!
ResponderEliminarGracias, funcionó perfectamente
ResponderEliminar¡Funciona! ¡Gracias.!
ResponderEliminarJusto lo que necesitaba para no tener que utilizar PHP para evaluar los parametros recibidos.
Obs.
"index.js" != "script.js"
¡Gracias por la observación! ... ya está corregido :)
ResponderEliminarcapo!!! funciona a la perfeccion GRACIAS!!!
ResponderEliminar