septiembre 18, 2012

Redirigir por JQuery usando el método POST

Me hice esta función de Javascript que usa JQuery para resolverme yo mismo un problema y espero que le sea de utilidad a alguien mas.

Es muy común necesitar redirigir al usuario por javascript desde nuestro sitio web a otra página, lo cual es muy simple de hacer simplemente cambiando la propiedad window.location.href o bien abriendo una nueva pestaña en el navegador con la función window.open()

El problema está en si lo que se desea es redirigir el navegador a otra dirección web y además incluir en esa solicitud variables que viajen por el método POST, esto suele ser necesario cuando se consume alguna API, se desea autenticar automáticamente al usuario en algún sitio enviando sus credenciales, se desea consumir un servicio REST "especial", o simplemente enviar a una nueva página información que no sea visible en la dirección URL. Esta al parecer es una duda muy común en el sitio de stackoverflow y a menudo se confunde el problema con una solicitud AJAX (lo cual es muy simple de resolver usando JQuery),  pero en este caso se requiere redirigir al usuario a otra página, no cargar contenido en segundo plano.

La función redirect_by_post(purl, pparameters, in_new_tab)  recibe 3 parámetros muy sencillos, el primero es una cadena con la dirección url de la página a abrir, el segundo es un objeto javascript con las variables a enviar, y el tercero es un valor booleano que de ser verdadero indica que se desea abrir la página en una nueva pestaña del navegador y en caso de ser un valor falso se abre en la misma pestaña activa.

 Se puede ver un ejemplo de su uso aquí:
 

La función simplemente crea un formulario dentro del cuerpo de la página; lo inicializa para que trabaje tal como se le ha indicado a la función que debe comportarse, y una vez enviado el formulario lo elimina del DOM, esto permite trabajar dinámicamente el número de variables a enviar y funciona bien con los principales navegadores.

Si le hacen alguna mejora a esta función pueden postearla en el repositorio de GitHub donde está alojada.

Un saludo y espero les sirva  =:-)

10 comentarios:

  1. Excelente post, lo que estaba buscando.

    Gracias!

    ResponderEliminar
  2. Ni sirve! :) muy buena funcion y es un placer saludarte.

    ResponderEliminar
    Respuestas
    1. Igualmente Marcelo, un gusto saber de ti... espero que todo te vaya de maravilla, un saludo a ti y a Lupita

      Eliminar
  3. Anónimo2:26 p. m.

    Excelente aporte, me sirvió de mucho.
    Gracias!

    ResponderEliminar
  4. Buenisimo, era justo lo que nescesitaba , Mil Gracias!!

    ResponderEliminar
  5. Excelente!!!
    Ésto es precisamente lo que estaba buscando. Ya me había gastado un par de horas tratando de hacerlo.
    Muchísimas gracias!!! (Y)

    ResponderEliminar
  6. como hago para capturar esas variables en la pagina destino?

    saludos

    ResponderEliminar
  7. Increible! justo lo que buscaba.. ya me esba volviendo loco. Muchisimas gracias

    ResponderEliminar
  8. Excelente aporte, funciona perfecto!!!
    Después de horas en san google, la solución.
    Muchísimas gracias!!!

    ResponderEliminar
  9. Anónimo3:15 a. m.

    Muchísimas gracias

    ResponderEliminar