Esta es una práctica inicial sobre PHP trabajando con AJAX en un formulario de búsqueda, en primer instancia solo esta pasando el objeto de búsqueda a la sección inferior identificada con un ID, más adelante se presentará con un resultado más apropiado de búsqueda.
Esta práctica requiere de bootstrap, como de jquery previamente instalados sobre todo en los archivos donde se llame a alguna de las funciones
PHP
<?php
$palabra = $_POST["palabra"];
echo $palabra;
echo "Respondiendo desde el servidor";
$productos = array
(
array("Arroz", "KG", "3000",10),
array("Arroz", "KG", "3000",10),
array("Arroz", "KG", "3000",10),
array("Arroz", "KG", "3000",10)
);
echo var_dump($productos);
?>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<?php
echo "<table class='table table-dark'>
<tr>
<td>NOMBRE</td>
<td>UNIDAD</td>
<td>VALOR</td>
<td>CANTIDAD</td>
</tr>";
foreach($productos as list($nombre,$unidad,$valor,$cantidad))
{
echo "<tr>
<td>$nombre</td>
<td>$unidad</td>
<td>$valor</td>
<td>$cantidad</td>
</tr>";
}
echo"</table>"
?>
</div>
<div class="col-md-3"></div>
</div>
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</head>
<body>
<h1 class="text-center mt-3">BUSCADOR</h1>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<form name="frm_Buscador" id="frm_Buscador" action="consultarDatos.php">
<div class="form-group">
<label for="">Digite la palabra a buscar</label>
<input class="form-control" type="text" id="palabra" name="palabra">
</div>
<button name="btnConsultar" class="btn btn-danger btn-block mt-3" id="btnConsultar">Consultar</button>
</form>
<div id="resultadoBusqueda">
<h2>Aquí se mostrará el resultado de la búsqueda</h2>
</div>
</div>
<div class="col-md-2"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="js/funciones.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
JS
//defino funcion jquery
$("#frm_Buscador").submit(function(event) {
event.preventDefault(); //evitar submit autmatico
alert("Registrando");
datos=$('#frm_Buscador').serialize();
$.ajax({
type:'POST',
url:'consultarDatos.php',
data:datos,
success:function(data){
document.getElementById('resultadoBusqueda').innerHTML = data;
}
});
});
