Featured Post

Tablas Responsivas con Bootstrap 5 pc escritorio y dispositivos mobiles

el
0

Proyecto web Cargar Rubros en Selector Javascript Fetch Await Async (peticiones asíncronas) Php Api-Json Mysql - Css Nativo

el


Index.php

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style> 

*{

font-family: Verdana;

font-weight:bold;

}

body {

text-align:center;

}

select {

width: 250px;

margin-top: 20px;

border: 1px solid grey;

padding: 10px 10px;

border-radius: 4px;

font-size: 14px;

}

</style>

</head>

<body>

<select id="items"></select>

<script>

async function cargar_lista() {

try{

const respuesta = await fetch(`api_json.php`);

const datos = await respuesta.json();

var select = document.getElementById('items');

var option = '<option value="0">Seleccione Rubro...</option>';

for(var i=0; i < datos.length; i++){

option += `<option value="${datos[i].id}">${datos[i].nombre}</option>`;

}

select.innerHTML = option;

}catch(err){

console.error(err); 

alert(err);

}

}

cargar_lista();


</script>

</body>

</html>


api_json.php

<?php

$conexion=new PDO("mysql:dbname=tienda;host=localhost","root","root");

$conexion->query("SET NAMES 'UTF8'");

$consulta = "SELECT * FROM rubros";

$respuesta= $conexion->prepare($consulta);

$respuesta->execute();

$rubros = array();

while($campos=$respuesta->fetch(PDO::FETCH_ASSOC)){

     $rubros[]= $campos;

}

echo json_encode($rubros);

?>

VISTA PREVIA



Post publicado por:




Comentarios

Publicar un comentario