Código
<!doctype html> <html> <head> <meta charset="utf-8"> <title> Serealize </title> <script src="jquery-3.3.1.js"></script> <script> //La primera linea de código hace referencia a que cuando la pagina web se cargue //tambien el metodo mostrar lo hará, ejecutando sus instrucciones $(function(){ mostrar(); }); //Este método ya lo vimos function enviardatos(){ var datos=$("#formDatos").serialize(); alert (datos), $.ajax({ type: "POST", url: "servidor.php", cache: false, data: datos, error:function(){ $("#resultado").html("Error"); }, beforeSend:function(){ $("#resultado").html("Cargando..."); }, success: function(okay){ $("#resultado").html("Hecho"); } }); } //Este es una nueva función que nos permitirá mostrar los datos de nuestra BD en una tabla de html //Se compone de la misma estructura que la función anterior por que seguimos usando Ajax //Bien, ahora en el tipo, seguira siendo POST, la URL ahora cambiara, se creara un archivo llamado //mostrarDatos.php en donde guardaremos la consulta de mysql function mostrar(){ $.ajax({ type: "POST", url: "mostrarDatos.php", //Si el resultado de la consulta es exitoso guardaremos los datos en "resultado" success: function(resultado){ //Ahora utilizaremos JSON para guardar los datos en un arreglo serializado, que es lo que vamos a serializar, pues "resultado" var js= JSON.parse(resultado); //Ahora crearemos una varible que nos servira como una cadena de caracteres para crear el body de la tabla y pegar los datos var tabla; //Con un ciclo recorremos los datos que nos arroja mysql y los vamos asignando for (var i = 0; i < js.length; i++) { tabla+= '<tr><td>'+js[i].Id+'</td><td>'+js[i].Nombre+'</td><td>'+js[i].AP+'</td><td>' +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 } //Por ultimo creamos los botones eliminar y editar //y pegamos la cadena de caracteres en el html $('#tbody').html(tabla); } }); } </script> </head> <body> <div> <form name="formDatos" id="formDatos" method="POST"> <input type="hidden" id="txtId"> <label for="txtNombre">Nombre: </label> <input type="text" id="txtNombre" name="txtNombre"><br><br> <label for="txtApellidoPaterno">Apellido Paterno: </label> <input type="text" name="txtApellidoPaterno" id="txtApellidoPaterno"><br><br> <label for="txtApellidoMaterno" >Apellido Materno: </label> <input type="text" name="txtApellidoMaterno" id="txtApellidoMaterno"><br><br> <label for="select" >Edad: </label> <select name="select"> <?php for($y = 18; $y <= 100; $y++){ ?> <option value="<?=$y?>"><?=$y?></option> <?php } ?> </select> <label for="txtPais">Pais: </label> <input type="text" id="txtPais" name="txtPais"><br><br> <label for="txtRFC">RFC: </label> <input type="text" name="txtRFC" id="txtRFC"><br><br> <br><label> Sexo: </label><br> <label for="radioSexo"> Hombre </label><input type="radio" name="radioSexo" id="radioSexo" value="H"> <label for="radioSexo" > Mujer</label><input type="radio" name="radioSexo" id="radioSexo" value="M"> <button type="button" name="btnEnviar" id="btnEnviar" onClick="javascript:enviardatos();">Enviar</button> </form> </div> <div> <h2>Resultados</h2><br> <div id="resultado"></div> <?php //Se crea el esqueleto de la tabla ?> <table> <thead> <th>ID</th> <th>Nombre</th> <th>Apellido</th> <th>Pais</th> <th>RFC</th> <th>Editar</th> <th>Eliminar</th> </thead> <tbody id="tbody"> </tbody> </table> </div> </body> </html>