busqueda por botones ajax+mysql+php

[Alexis88]

Realizar una petición asíncrona (Ajax) con y sin jQuery, es muy sencillo.

Supongamos que tenemos un formulario con dos campos de texto; uno para el nombre de usuario y el otro para su clave, entonces, el usuario al pulsar el botón de envío, desencadena el evento submit en el formulario con lo cual los datos de este se enviarán a otro archivo (o al mismo) para ser procesados. Como se busca evitar la recarga de la ventana, entonces se usa Ajax, con lo cual, primero habría que cancelar dicho evento usando el método .preventDefault() y luego enviando los datos mediante Ajax.

Un ejemplo:

Código HTML:

<form id = "login" action = "procesar.php" method = "post">
    Nombre de usuario: <input type = "text" name = "usuario" />
    Clave de acceso: <input type = "password" name = "clave" />
    <input type = "submit" />
</form>
 

Código Javascript:

$("#login").on("submit", function(event){
    event.preventDefault();
 
    $.ajax({
        url: $(this).prop("action"),
        type: $(this).prop("method"),
        data: $(this).serialize() //Crea una cadena de consulta con los datos ingresados
    }).done(function(response){
        //Cuando se complete la petición de manera exitosa
    }).fail(function(jqXHR, textStatus){
        //Cuando ocurra un error durante la petición
    });
});
 

Para tu caso, tendrías que enviar el valor ingresado y el nombre del campo de la tabla en donde se buscará el dato o un valor con el cual puedas decidir mediante una estructura de decisión en qué campo de la tabla buscar el dato.

Por ejemplo:

Código HTML:

<form id = "buscador" action = "buscar.php" method = "get">
    Buscar: <input type = "text" name = "buscar" />
    
    Por:
    <div>
        Nombre <input type = "radio" name = "filtro" value = "nombre" />
        Apellido <input type = "radio" name = "filtro" value = "apellido" />
    </div>
 
    <input type = "submit" />
</form>
 
<section id = "listado"></section>
 

Código Javascript:

$("#buscador").on("submit", function(event){
    event.preventDefault();
 
    $.ajax({
        url: $(this).prop("action"),
        type: $(this).prop("method"),
        data: $(this).serialize(),
        dataType: "html"
    }).done(function(response){
        $("#listado").html(response);
    }).fail(function(jqXHR, textStatus){
        console.log(textStatus);
    });
});
 

Código PHP:

<?php
$conexion = mysqli_connect('servidor', 'usuario', 'contraseña', 'base de datos');
 
//Si no se logra conectar, se termina la ejecución del script
if (!$conexion) exit(mysqli_connect_error());
 
$dato = mysqli_real_escape_string($conexion, strip_tags(trim($_GET['buscar'])));
$campo = mysqli_real_escape_string($conexion, strip_tags(trim($_GET['filtro'])));
 
$consulta = "SELECT id, nombre, apellido FROM tabla WHERE $campo LIKE '%$dato%'"; //O $campo = '$dato'
$resultados = mysqli_query($conexion, $consulta) or exit(mysqli_error($conexion));
 
if (mysqli_num_rows($resultados)){
?>
    <table>
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Opciones</th>
            </tr>
        </thead>
        <tbody>
<?php
    while ($filas = mysqli_fetch_array($resultados)){
?>
        <tr>
            <td><?=$filas['nombre']?></td>
            <td><?=$filas['apellido']?></td>
            <td>
                <a href = "editar.php?id=<?=$filas['id']?>">Editar</a>
                <a href = "eliminar.php?id=<?=$filas['id']?>">Eliminar</a>
            </td>
        </tr>
<?php
    }
    mysqli_free_result($resultados);
?>
        </tbody>
    </table>
<?php
}
else{
    echo 'No se encontraron datos en la consulta realizada';
}
 
mysqli_close($conexion);
?>
 

El formulario de este ejemplo tiene un campo de texto en donde el usuario ingresará el dato a buscar y dos opciones de las cuales solo puede marcar una. Cuando se pulse el botón de envío, se enviarán mediante Ajax el dato ingresado y el valor de la opción marcada, luego, cuando se reciba una respuesta, esta será insertada en la sección que se encuentra debajo del formulario.

En el archivo PHP, realizo la conexión a la base de datos, desinfecto los datos recibidos de posible contenido malicioso (solo es una desinfección simple, puede ser más exhaustiva), elaboro la consulta y la ejecuto. Si de esta obtengo resultados, elaboro una tabla en donde los imprimo, caso contrario, un mensaje en el que le indico al usuario que no hay datos en la base de datos con la consulta realizada. Cualquiera de ambos resultados será el que se envíe al archivo anterior y que se insertará en la sección de id "listado".

Adapta este ejemplo a lo que necesitas.

Saludos