Sunteți pe pagina 1din 7

13/8/2019 Cómo enviar parámetros entre documentos HTML usando JavaScript – De Idea a App

Cómo enviar parámetros entre


documentos HTML usando
JavaScript
En mi articulo anterior, se pudo ver, como se guarda información mediante el uso de una base de datos
creada en el lado de cliente,  gracias a una de las  nuevas características de html5. Claro esta que así
como una herramienta, característica o método, ya sea nuevo o viejo, tenga una ventaja, también trae
consigo desventajas, y es bueno tener conocimiento de estas.

Una desventaja la cual me encontré en el camino mientras desarrollaba, fue que, al dar click a un botón
o cualquier elemento dentro de la pagina que me enviara a otra pagina, los datos dentro de la nueva
pagina no eran visibles.

Esta desventaja se puede solucionar desarrollando nuestra aplicación web mediante la


arquitectura SPA (Single Page Application o Aplicación de una sola pagina) , esto nos permite tener una
mejor fluidez en nuestra pagina, y ademas tendrá una apariencia como las aplicaciones de escritorio.
Esta experiencia es buena para el usuario, ya que podrá tener todo en una sola vista.

En la imagen anterior, se puede ver un diseño que se puede usar, una cabecera, el cual se coloca el
titulo de la aplicación o nombre d la pagina, una barra lateral, o también puede ser seguido de la
cabecera o en donde quieran, y un espacio donde ira el contenido, el cual se cambiara dependiendo la
opción que estemos este nos mostrara información relativa en donde estemos situados en la
aplicación. Por lo general recomiendo crear un div, el cual servirá como contenedor de la información a
mostrar, lo diferenciamos con un identificador, de preferencia yo uso contenedor.

https://deideaaapp.org/como-enviar-parametros-entre-documentos-html-usando-javascript/ 1/7
13/8/2019 Cómo enviar parámetros entre documentos HTML usando JavaScript – De Idea a App

A continuación, explicare como realizar la aplicación e iré colocando el código. Usare el


framework  Materializecss  para darle estilo a nuestra aplicación, html, javascript, jquery; y también
como enviar los parámetros entre las diferentes paginas.

Primero veremos el código de las paginas html

index.html

1 <!DOCTYPE html>
2
3 <html>
4
5 <head>
6
7 <title>SPA - Enviando parametros</title>
8
9 <meta charset="UTF-8">
10 <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
12 <link href="materialize/css/materialize.min.css" rel="stylesheet" type="text/css"/>
13
14 </head>
15
16 <body>
17
18 <nav>
19 <div class="nav-wrapper blue lighten-1">
20 <a href="#" class="brand-logo center">SPA</a>
21 </div>
22 </nav>
23
24 <div class="row container">
25
26 <div class="col s12 m6 l3">
27
28 <ul class="collection">
29 <li class="collection-item" id="registrar">Registrar</li>
30 <li class="collection-item" id="consultar">Consultar</li>
31 </ul>
32

https://deideaaapp.org/como-enviar-parametros-entre-documentos-html-usando-javascript/ 2/7
13/8/2019 Cómo enviar parámetros entre documentos HTML usando JavaScript – De Idea a App
33 </div>
34
35 <div class="col s12 m6 l9" id="contenedor">
36
37
38
39 </div>
40
41 </div>
42
43 <script src="jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
44 <script src="jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
45 <script src="js/clases.js" type="text/javascript"></script>
46
47 </body>
48
49 </html>

formulario.html

1 <div class="divider"></div>
2
3 <div class="row">
4 <form class="col s12">
5
6 <div class="row">
7
8 <div class="input-field col s12 l6">
9 <input id="nombretxt" type="text" class="validate" placeholder="Nombre" required>
10 </div>
11
12 <div class="input-field col s12 l6">
13 <input id="apellidotxt" type="text" class="validate" placeholder="Apellido" required>
14 </div>
15
16 <div class="input-field col s12 l6">
17 <input id="telefonotxt" type="tel" class="validate" placeholder="Telefono" required>
18 </div>
19
20 <div class="input-field col s12 l6">
21 <input id="correotxt" type="email" class="validate" placeholder="Correo" required>
22 </div>
23
24 </div>
25
26 </form>
27
28 <div class="row">
29 <div class="col s12 m6 l6 waves-block btn blue lighten-1" id="btn-registrar">
30 Registrar
31 </div>
32
33 <div class="center col s12 m6 l6" id="mensaje"></div>
34 </div>
35
36 </div>
37
38 <script src="jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
39 <script src="jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
40 <script src="js/index.js" type="text/javascript"></script>

registros.html

https://deideaaapp.org/como-enviar-parametros-entre-documentos-html-usando-javascript/ 3/7
13/8/2019 Cómo enviar parámetros entre documentos HTML usando JavaScript – De Idea a App

1 <table>
2
3 <thead>
4 <tr>
5 <th data-field="Tareas">Usuarios</th>
6 </tr>
7 </thead>
8
9 <tbody id="table_user">
10 </tbody>
11
12 </table>
13
14
15
16 <script src="jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
17 <script src="jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
18 <script src="js/registros.js" type="text/javascript"></script>

Si, se pudieron dar cuenta, en los archivos html expuestos anteriormente, solo el index posee el head, y
los otros solo posen etiquetas que van dentro del body, esto se debe, a que vamos a cargar las paginas
dentro de div, con el fin de no recargar a pagina complta cada vez que deseamos cambiar de vista.

index.js

1 $(document).ready(function (){
2
3 var btn_consulta, btn_registro;
4
5 btn_consulta = $('#consultar');
6 btn_registro = $('#btn-registrar');
7
8 btn_registro.on('click', CapturaDatos);
9
10 function CapturaDatos(){
11
12 var c_nombre, c_apellido, c_telefono, c_correo, mensaje, usuario, usuarios;
13
14 usuarios = [];
15
16 c_nombre = $('#nombretxt').val();
17 c_apellido = $('#apellidotxt').val();
18 c_telefono = $('#telefonotxt').val();
19 c_correo = $('#correotxt').val();
20
21 mensaje = $('#mensaje');
22
23 if(c_nombre === '' || c_apellido === '' || c_telefono === '' || c_correo === ''){
24 mensaje.empty();
25 mensaje.append('<p class="red-text">Debe llenar todos los campos</p>');
26 }else{
27
28 usuario = {
29 nombre: c_nombre,
30 apellido: c_apellido,
31 telefono: c_telefono,
32 correo: c_correo
33 };
34
35 //console.log(usuario);
36 usuarios.push(usuario);
https://deideaaapp.org/como-enviar-parametros-entre-documentos-html-usando-javascript/ 4/7
13/8/2019 Cómo enviar parámetros entre documentos HTML usando JavaScript – De Idea a App
37 registro.setUser(usuarios);
38 LimpiarCampos();
39 mensaje.empty();
40 mensaje.append('<p class="green-text">Usuario guardado</p>');
41
42
43 }
44
45
46 };
47
48 function LimpiarCampos(){
49
50 $('#nombretxt').val('');
51 $('#apellidotxt').val('');
52 $('#telefonotxt').val('');
53 $('#correotxt').val('');
54
55 };
56
57 btn_consulta.on('click', LoadRegistros);
58
59 function LoadRegistros(){
60
61 var component = 'registros.html';
62
63 $.ajax({
64 mimeType: 'text/html; charset=utf-8',
65 url: component,
66 type: 'GET',
67 dataType: "html",
68 async: true,
69 success: function(data) {
70 $('#contenedor').html(data);
71 },
72 error: function (jqXHR, textStatus, errorThrown) {
73 alert(errorThrown);
74 }
75 });
76 };
77
78 });

registros.js

1 $(document).ready(function (){
2
3 var btn_registrar;
4
5 btn_registrar = $('#registrar');
6
7 btn_registrar.on('click', LoadIndex);
8
9 function LoadIndex(){
10
11 var component = 'formulario.html';
12
13 $.ajax({
14 mimeType: 'text/html; charset=utf-8',
15 url: component,
16 type: 'GET',
17 dataType: "html",
18 async: true,

https://deideaaapp.org/como-enviar-parametros-entre-documentos-html-usando-javascript/ 5/7
13/8/2019 Cómo enviar parámetros entre documentos HTML usando JavaScript – De Idea a App
19 success: function(data) {
20 $('#contenedor').html(data);
21 },
22 error: function (jqXHR, textStatus, errorThrown) {
23 alert(errorThrown);
24 }
25 });
26 };
27
28
29 function LoadUsuarios(){
30
31 var usuarios, tabla, html;
32
33 usuarios = registro.getUser();
34 tabla = $('#table_user');
35
36 if(usuarios === undefined){
37
38 tabla.empty();
39 html = '<tr>';
40 html += '<td class="row">';
41 html += '<div class="col s12">No hay usuarios</div>';
42 html += '</td>';
43 html += '</tr>';
44
45 tabla.append(html);
46
47 }else{
48
49
50 tabla.empty();
51 html = '<tr>';
52 html += '<td class="row">';
53 html += '<div class="col s12">'+ usuarios[0].nombre +'</div>';
54 html += '<div class="col s12">'+ usuarios[0].apellido +'</div>';
55 html += '<div class="col s12">'+ usuarios[0].telefono +'</div>';
56 html += '<div class="col s12">'+ usuarios[0].correo +'</div>';
57 html += '</td>';
58 html += '</tr>';
59
60 tabla.append(html);
61
62 }
63
64 };
65
66 LoadUsuarios();
67
68 });

clases.js

1 var registro = new Registro;


2
3 function Registro(){
4
5 Registro.prototype.setUser = function (persona){
6 personas = persona;
7 };
8
9 Registro.prototype.getUser = function (){
10 return personas;

https://deideaaapp.org/como-enviar-parametros-entre-documentos-html-usando-javascript/ 6/7
13/8/2019 Cómo enviar parámetros entre documentos HTML usando JavaScript – De Idea a App
11 };
12
13 Registro.prototype.Formulario = function (){
14
15 var component = 'formulario.html';
16
17 $.ajax({
18 mimeType: 'text/html; charset=utf-8',
19 url: component,
20 type: 'GET',
21 dataType: "html",
22 async: true,
23 success: function(data) {
24 $('#contenedor').html(data);
25 },
26 error: function (jqXHR, textStatus, errorThrown) {
27 alert(errorThrown);
28 }
29 });
30
31 };
32
33 var personas;
34
35 }
36
37 registro.Formulario();

Bueno, ahora pongamos  un poco de atención al archivo  clases.js,  podemos ver como creamos un
nuevo registro, lo que nos permite declarar  las funciones creadas mediante esta forma, agregando
prototype, nos permite incluso, cambiar una función, pudiendo agregarle, mas funcionalidades, y
podemos llamar de forma global cualquier función en cualquier archivo que necesitemos.

Vista registrar

Vista Consultar
https://deideaaapp.org/como-enviar-parametros-entre-documentos-html-usando-javascript/ 7/7