- Obtener enlace
- X
- Correo electrónico
- Otras aplicaciones
index.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<script src="js/axios.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="fontawesome-free/all.min.js"></script>
<title></title>
<style type="text/css">
*{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" class="form-control" id="nombre" name="nombre" style="border:0 solid gray;border-radius:8px;object-fit:cover;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);" value=''>
<a class="btn btn-info btn-sm" onclick="buscardato()"><i class="fas fa-search"></i> BUSCAR</a>
<!-- <input type="text" class="form-control" id="nombre2" name="nombre2" placeholder="Nombre">-->
<div id="lista" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"></div>
<div style="border: 1px solid #eee;">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">nombre</th>
<th scope="col">precio</th>
<th scope="col">foto</th>
</tr>
</thead>
<tbody id="registros">
</tbody>
</table>
</div>
</div>
<script>
function buscardato() {
const nombre = document.querySelector('#nombre');
axios.post('buscarapi.php', {
id: nombre.value
},{
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
})
.then(function (response) {
const info = response.data;
console.log(info);
/*
const name = info.data.nombre;
const e = info.data.id;
console.log(name);
console.log(e);
document.querySelector('#nombre2').value = e;
*/
/*******************************************************/
let registros = '';
registros += '<ul>';
for (let i = 0; i < response.data.length; i++) {
console.log(response.data[i].nombre);
registros += `
<li>
${response.data[i].id} ) ${response.data[i].nombre} _ $ ${response.data[i].precio}
</li>
`;
}
registros += '</ul>'
document.getElementById("lista").innerHTML = registros;
/*******************************************************/
let contenidoTabla = "";
for (let i = 0; i < response.data.length; i++) {
contenidoTabla += `<tr>
<td>${response.data[i].id}</td>
<td>${response.data[i].nombre}</td>
<td>${response.data[i].precio}</td>
<td><img src="fotos/${response.data[i].fotos}" style="width:80px;height:80px;border:0 solid gray;border-radius:8px;object-fit:cover;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"
</td>
</tr>`;
}
document.getElementById("registros").innerHTML = contenidoTabla;
/**********************************************************/
})
.catch(function (error) {
console.log(error);
});
}
buscardato();
/*
function buscardato() {
axios.post('buscarapi.php', {
id: 1
})
.then(function (response) {
const info = response.data;
console.log(info);
})
.catch(function (error) {
console.log(error);
});
}
buscardato();
*/
</script>
</body>
-------------------------------------------------------
buscarapi.php
<?php
header('Content-Type: application/json; charset=UTF-8');
$conexion=new PDO("mysql:dbname=tienda;host=localhost","root","root");
$conexion->query("SET NAMES 'UTF8'");
$consulta = "SELECT * FROM productos WHERE nombre LIKE '%$id%'";
$resultado = $conexion->prepare($consulta);
$resultado->execute();
$articulos = array();
while($registros=$resultado->fetch(PDO::FETCH_ASSOC)){
$articulos[]= $registros;
}
echo json_encode($articulos,JSON_PRETTY_PRINT);
Comentarios
Publicar un comentario