elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Recopilación Tutoriales y Manuales Hacking, Seguridad, Privacidad, Hardware, etc


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Recuperar datos de una tabla a un formulario
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Recuperar datos de una tabla a un formulario  (Leído 3,597 veces)
padiuwu

Desconectado Desconectado

Mensajes: 34


Ver Perfil
Recuperar datos de una tabla a un formulario
« en: 12 Junio 2020, 19:39 pm »

Alguien que me pueda decir como puedo recuperar los datos de una tabla mediante un boton (usando ajax)
Código
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title> Serealize </title>
  6. <script src="jquery-3.3.1.js"></script>
  7. <script>
  8. //La primera linea de código hace referencia a que cuando la pagina web se cargue
  9. //tambien el metodo mostrar lo hará, ejecutando sus instrucciones
  10. $(function(){
  11. mostrar();
  12. });
  13. //Este método ya lo vimos
  14. function enviardatos(){
  15.  
  16. var datos=$("#formDatos").serialize();
  17. alert (datos),
  18. $.ajax({
  19. type: "POST",
  20. url: "servidor.php",
  21. cache: false,
  22. data: datos,
  23. error:function(){
  24. $("#resultado").html("Error");
  25. },
  26. beforeSend:function(){
  27. $("#resultado").html("Cargando...");
  28.  
  29. },
  30. success: function(okay){
  31. $("#resultado").html("Hecho");
  32. }
  33.  
  34. });
  35.  
  36. }
  37. //Este es una nueva función que nos permitirá mostrar los datos de nuestra BD en una tabla de html
  38. //Se compone de la misma estructura que la función anterior por que seguimos usando Ajax
  39. //Bien, ahora en el tipo, seguira siendo POST, la URL ahora cambiara, se creara un archivo llamado
  40. //mostrarDatos.php en donde guardaremos la consulta de mysql
  41. function mostrar(){
  42. $.ajax({
  43. type: "POST",
  44. url: "mostrarDatos.php",
  45. //Si el resultado de la consulta es exitoso guardaremos los datos en "resultado"
  46. success: function(resultado){
  47. //Ahora utilizaremos JSON para guardar los datos en un arreglo serializado, que es lo que vamos a serializar, pues "resultado"
  48. var js= JSON.parse(resultado);
  49. //Ahora crearemos una varible que nos servira como una cadena de caracteres para crear el body de la tabla y pegar los datos
  50. var tabla;
  51. //Con un ciclo recorremos los datos que nos arroja mysql y los vamos asignando
  52. for (var i = 0; i < js.length; i++) {
  53. tabla+= '<tr><td>'+js[i].Id+'</td><td>'+js[i].Nombre+'</td><td>'+js[i].AP+'</td><td>'
  54. +js[i].Pais+'</td><td>'+js[i].RFC+'</td><td><button type="button" name="btnEditar" id="btnEditar" onClick="javascript:recuperarDatos();">Editar</button></td><td><button type="button" name="btnEliminar" id="btnEliminar" onClick="">Eliminar</button></td></tr>'; //Aqui se encuentra el boton editar con el evento onclick
  55. }
  56. //Por ultimo creamos los botones eliminar y editar
  57. //y pegamos la cadena de caracteres en el html
  58. $('#tbody').html(tabla);
  59. }
  60.  
  61. });
  62.  
  63. }
  64. </script>
  65. </head>
  66. <body>
  67. <div>
  68. <form name="formDatos" id="formDatos" method="POST">
  69. <input type="hidden" id="txtId">
  70. <label for="txtNombre">Nombre: </label>
  71. <input type="text" id="txtNombre" name="txtNombre"><br><br>
  72. <label for="txtApellidoPaterno">Apellido Paterno: </label>
  73. <input type="text" name="txtApellidoPaterno" id="txtApellidoPaterno"><br><br>
  74. <label for="txtApellidoMaterno" >Apellido Materno: </label>
  75. <input type="text" name="txtApellidoMaterno"  id="txtApellidoMaterno"><br><br>
  76. <label for="select" >Edad: </label>
  77.  <select name="select">
  78. <?php
  79. for($y = 18; $y <= 100; $y++){
  80. ?>
  81. <option value="<?=$y?>"><?=$y?></option>
  82. <?php
  83. }
  84. ?>
  85. </select>
  86. <label for="txtPais">Pais: </label>
  87. <input type="text" id="txtPais" name="txtPais"><br><br>
  88. <label for="txtRFC">RFC: </label>
  89. <input type="text" name="txtRFC" id="txtRFC"><br><br>
  90.  <br><label> Sexo: </label><br>
  91.  <label for="radioSexo"> Hombre </label><input type="radio"  name="radioSexo" id="radioSexo" value="H">
  92.  <label for="radioSexo" > Mujer</label><input type="radio" name="radioSexo" id="radioSexo" value="M">
  93.  <button type="button" name="btnEnviar" id="btnEnviar" onClick="javascript:enviardatos();">Enviar</button>
  94.  </form>
  95.  
  96. </div>
  97. <div>
  98.  
  99. <h2>Resultados</h2><br>
  100. <div id="resultado"></div>
  101. <?php
  102. //Se crea el esqueleto de la tabla
  103. ?>
  104. <table>
  105. <thead>
  106. <th>ID</th>
  107. <th>Nombre</th>
  108. <th>Apellido</th>
  109. <th>Pais</th>
  110. <th>RFC</th>
  111. <th>Editar</th>
  112. <th>Eliminar</th>
  113. </thead>
  114. <tbody id="tbody">
  115.  
  116. </tbody>
  117. </table>
  118. </div>
  119.  
  120. </body>
  121. </html>
  122.  


En línea

Tryptophan

Desconectado Desconectado

Mensajes: 52


Ver Perfil
Re: Recuperar datos de una tabla a un formulario
« Respuesta #1 en: 21 Junio 2020, 12:57 pm »

Te recomiendo googlear un poco, porque eso esta mas que resuelto.

Saludos


En línea

Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: Recuperar datos de una tabla a un formulario
« Respuesta #2 en: 23 Junio 2020, 14:53 pm »

Hola!

https://www.youtube.com/watch?v=IHVQX52W-LQ

Recorda que una cosa en jquery es .html y otra es .append

con .html lo que hace es como setear el html de un elemento... reemplazarlo...
pero con append lo que se hace es agregar html a un elemento, no reemplaza agrega al final...

por ejemplo,

en un buscador dinámico te va a convenir usar .html
pero en un sistema donde al hacer scroll muestre más resultados sobre algo, ya te conviene usar append...

Mira el vídeo y me vas a entender un poco mejor capaz  :xD
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines