<!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>