Inicio > javascript, jquery, OpenSource > Leer parámetros de la url con Javascript

Leer parámetros de la url con Javascript

Jueves, 22 de septiembre de 2011 Dejar un comentario Ir a comentarios

En este post trataré de explicar como obtener los datos enviados por “GET” usando Javascript ( y/o Jquery).

La necesidad es : obtener los datos enviados por url, para las validaciones que necesitemos.

// Leer los datos GET de nuestra pagina y devolver un array asociativo (Nombre de la variable GET => Valor de la variable).
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

Considerando la URL:

http://www.example.com/?me=myValue&name2=SomeOtherValue

Llamando a la funcion getUrlVars() nos devolverá un arreglo con la siguiente estructura:

{
    "me"    : "myValue",
    "name2" : "SomeOtherValue"
}

Para obtener el valor del primer registro lo hacemos del siguiente modo:

var first = getUrlVars()["me"];

// Para obtener el segundo parámetro
var second = getUrlVars()["name2"];

El siguiente código está pasado como una extension de  jQuery:

$.extend({
  getUrlVars: function(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return $.getUrlVars()[name];
  }
});

Ejemplo de implementación:

// Obtener el objeto
var allVars = $.getUrlVars();

// Obtener el valor pasando la llave del elemento que necesitamos
var byName = $.getUrlVar('name');

Idea original de http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html

Articulos relacionados:

  • No hay artículos relacionados
Categories: javascript, jquery, OpenSource Tags:
  1. Sin comentarios aún.
  1. Sin trackbacks aún.