- Obtener enlace
- X
- Correo electrónico
- Otras aplicaciones
Proyecto web buscar y listar registros fetch api json mysql php javascript.
Web project search and 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";
}
body{
width:95%;
margin-left:auto;
margin-right:auto;
margin-top:30px;
}
input[type=text] {
width: 300px;
padding: 5px 5px;
margin: 3px 0;
box-sizing: border-box;
}
input[type=text]:hover {
border: 3px solid #555;
}
button{
background-color: #535353;
border: none;
color: white;
padding: 7px 7px;
text-decoration: none;
margin: 3px 0;
border-radius: 8px;
}
</style>
<body>
<input type="text" id="caja" placeholder="Ingrese Nombre o Id a buscar...">
<button id="boton">Buscar-Search</button>
<div id="lista"></div>
<script>
//CODIGO JS PARA HACER CLICK EN EL BOTON
document.getElementById('boton').addEventListener('click', function () {
datos_lista();
}
);
//CODIGO JS PARA HACER ENTER AL TERMINAR DE TIPEAR TEXTO DENTRO CAJA TEXTO
document.getElementById('caja').addEventListener('keypress', function (event) {
if (event.keyCode === 13) {
datos_lista();
}
});
//////////////////////////////////////////////
function datos_lista(){
let caj = document.getElementById("caja").value;
fetch(`json_api.php?nombre=${caj}`)
.then(respuesta => respuesta.json())
.then(tabla => {
if(tabla['vacio']){
document.getElementById("lista").innerHTML = '<h3 style="color:red">Registro No Encontrado !!!</h3>';
}else{
let registros = '';
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');
$pdo=new PDO("mysql:dbname=tienda;host=localhost","root","root");
$pdo->query("SET NAMES 'UTF8'");
$nombre = isset($_GET['nombre']) ? $_GET['nombre'] : die();
$query = "SELECT * FROM articulos where concat(nombre,id) LIKE '%{$nombre}%'";
$stmt = $pdo->prepare($query);
$stmt->execute();
$row_count = $stmt->rowCount();
$userData = array();
if($row_count > 0){
while($row=$stmt->fetch(PDO::FETCH_ASSOC)){
$userData[]=$row;
}
}else{
$userData['vacio']=['vacio'];
}
echo json_encode($userData);
?>
--------------
VISTAS PREVIA
-----------------
--------------
Post publicado por:
Comentarios
Publicar un comentario