- Obtener enlace
- X
- Correo electrónico
- Otras aplicaciones
Proyecto web listar registros fetch api json mysql php javascript.
Web project list records fetch api json mysql php javascript
[ index.php ]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {font-family: "Century Gothic";}
</style>
<body>
<div id="lista"></div>
<script>
function datos_lista(){
fetch('json_api.php')
.then(respuesta => respuesta.json())
.then(tabla => {
let registros = '<h2>Lista</h2>';
registros += '<ul>';
tabla.forEach(function(campo) {
registros += `
<li>
${campo.id} ) ${campo.nombre} _ $ ${campo.precio}
</li>
`;
});
registros += '</ul>'
document.getElementById("lista").innerHTML = registros;
});
}
datos_lista();
</script>
</body>
</html>
---------------------------------------
[ json_api.php ]
<?php
header("Access-Control-Allow-Origin: *");
header('Content-Type: application/json');
$conexion=new PDO("mysql:dbname=tienda;host=localhost","root","root");
$conexion->query("SET NAMES 'UTF8'");
$consulta = "SELECT * FROM articulos";
$sentencia = $conexion->prepare($consulta);
$sentencia->execute();
$articulos = array();
while($row=$sentencia->fetch(PDO::FETCH_ASSOC)){
$articulos[]=$row;
}
echo json_encode($articulos);
?>
---------------------------
[ tienda.sql ]
-- Base de datos: `tienda`
-- Estructura de tabla para la tabla `articulos`
CREATE TABLE `articulos` (
`id` bigint(20) NOT NULL,
`nombre` mediumtext COLLATE utf8_spanish_ci NOT NULL,
`precio` decimal(10,2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;
INSERT INTO `articulos` (`id`, `nombre`, `precio`) VALUES
(1, 'Aceite De Girasol Natura 900 Ml', '250.00'),
(2, 'Aceite Cañuelas De Girasol - 1.5 L', '380.00'),
(3, 'Mayonesa Hellmanns 475g', '130.00'),
(5, 'Cerveza Brahma Chopp Rubia 1lt Retornable', '220.00'),
(6, 'Pan De Salvado Lactal 630 Gr', '200.00'),
(7, 'Azúcar Chango 1 Kg', '90.00'),
(8, 'Harina Pureza Ultra Ref 0000 Vit D 1kg', '110.00');
ALTER TABLE `articulos`
ADD PRIMARY KEY (`id`);
ALTER TABLE `articulos`
MODIFY `id` bigint(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;
COMMIT;
---------------------
VISTA PREVIA
Post publicado por:
Comentarios
Publicar un comentario