- Obtener enlace
- X
- Correo electrónico
- Otras aplicaciones
proyecto web tabla registros fetch async await (peticiones asíncronas) api json mysql php javascript bootstrap 5
Proyecto web tabla registros fetch async await (peticiones asíncronas) json mysql php javascript bootstrap 5
Web project table records fetch async await (asynchronous requests) json mysql php javascript bootstrap 5
[ index.php ]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="container">
<br>
<div class="table-responsive">
<table class='table table-bordered table-hover table-striped table-sm'>
<thead class="table-dark">
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Precio</th>
</tr>
</thead>
<tbody id='filas'></tbody>
</table>
</div>
<script>
async function cargar_tabla() {
let respuesta = await fetch('json_api.php');
let datos = await respuesta.json();
return datos;
};
cargar_tabla().then(datostab => {
let registros = '';
datostab.forEach(function(tab) {
registros += `
<tr>
<td>${tab.id}</td>
<td>${tab.nombre}</td>
<td>${tab.precio}</td>
</tr>
`;
});
document.getElementById("filas").innerHTML = registros;
}).catch(error => {
throw error
})
cargar_tabla();
</script>
</body>
</html>
[ json_api.php ]
<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
$conexion = mysqli_connect('localhost','root','root','tienda');
$conexion->query("SET NAMES 'utf8'");
$vector_array = array();
$consulta = "SELECT * FROM articulos";
$resultado = mysqli_query($conexion, $consulta);
if (mysqli_num_rows($resultado) > 0) {
while($registros = mysqli_fetch_assoc($resultado)) {
$vector_array[]=$registros;
}
}
else
{
$vector_array[]="sindatos";
}
echo json_encode($vector_array);
$conexion->close();
?>
VISTA PREVIA
Post publicado por:
www.facebook.com/alfreinformatica
www.instagram.com/alfreinformatica
Comentarios
Publicar un comentario