Crear URL dinámico con jQuery
JQuery para crear una URL con variables pasadas a través de parámetros de URL
Crear URL dinámico con jQuery. En algunas ocasiones se requiere armar una estructura dinámica de URL a través de valores enviados desde un formulario.
Crear URL dinámico con jQuery
A continuación, veremos una serie de pasos que debemos de realizar para que todo funcione correctamente.
Primer paso: Declarar la librería jQuery
Es importante declarar esta librería para poder generar URL dinámicas y mejor aun usando la librería desde una CDN, veamos un ejemplo.
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Paso 02: Declarar Instrucción jQuery
Este pequeño script jQuery genera una URL dinámica a partir de parámetros personalizados o enviados vía POST o GET. Además, hace un llamado al id="container" para imprimir los resultados.
<script type="text/javascript">
var dynamicContent = "mipaginatest.com";
var url = "https://www."+dynamicContent+"?extraContenidosParametros";
$('#container').html('<a href="'+url+'">Nuevo enlace Dinamico</a>');
</script>Paso 03: Etiqueta de Salida HTML
Al ejecutar el código jQuery tenemos que darle una capa para que generen en HTML la nueva URL dinámica, es este caso crearemos un DIV con el id="container".
<div id="container">
</div>Todo el ejemplo completo
Crearemos un archivo llamado dinamic_url.html y dentro colocaremos todo el código
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>
<script type="text/javascript">
var dynamicContent = "mipaginatest.com";
var url = "https://www."+dynamicContent+"?extraContenidosParametros";
$('#container').html('<a href="'+url+'">Nuevo enlace Dinamico</a>');
</script>
</body>
</html>Al ejecutar el archivo anterior verán que el script creara un nuevo enlace, pero recuerden que pueden personalizar el script usando PHP y un formulario HTML
Además, pueden agregar estilos CSS, clases, etc.
