Buscador, php, jquery !!

[Alexis88]

Bienvenido a FDW.

Lo único que necesitas hacer es enviar el dato escrito mediante el método $.ajax, hacer la búsqueda en la BD con ese dato en el archivo PHP (o del lenguaje del servidor que uses) y devolver un array codificado en formato JSON, para lo cual puedes usar la función json_encode (si es que estás usando PHP).

Un pequeño ejemplo (con PHP):

Código HTML:

<form id = "buscador" action = "buscar.php" method = "get">
    <label>Buscar:</label>
    <input type = "text" name = "buscar" />
 
    <input type = "submit" />
</form>
 
<form id = "datos">
    <label>Nombre:</label>
    <input type = "text" name = "nombre" />
 
    <label>Apellidos:</label>
    <input type = "text" name = "apellidos" />
 
    <label>País:</label>
    <input type = "text" name = "pais" />
 
    <input type = "submit" />
</form>
 

Código Javascript:

$(document).ready(function(){
    $("#buscador").on("submit", function(event){
        event.preventDefault();
 
        $.ajax({
            url: $(this).prop("action"),
            type: $(this).prop("method"),
            data: $(this).serialize(),
            dataType: "JSON"
        }).done(function(response){
            if (response.estado == "OK"){
                $("#datos [name=nombre]").val(response.nombre);
                $("#datos [name=apellidos]").val(response.apellidos);
                $("#datos [name=pais]").val(response.pais);
            }
            else{
                alert(response.mensaje);
            }
        }).fail(function(jqXHR, textStatus, errorThrown){
            alert("Se produjo un error: " + textStatus);
        });
    });
});
 

Código PHP:

$conexion = new mysqli('server', 'user', 'password', 'db_name');
 
if ($conexion->connect_errno){
    exit('No se pudo conectar: ' . $conexion->connect_error);
}
 
$buscar = $conexion->real_escape_string(strip_tags(trim($_GET['buscar'])));
$consulta = "SELECT nombre, apellidos, pais FROM personas WHERE codigo = $buscar";
$resultado = $conexion->query($consulta) or exit('Se produjo un error al intentar ejecutar la consulta: ' . $conexion->error);
 
if ($resultado->num_rows){
    $registro = $resultado->fetch_array();
    $respuesta = [
        'estado' => 'OK',
        'nombre' => $registro['nombre'],
        'apellidos' => $registro['apellidos'],
        'pais' => $registro['pais']
    ];
    $resultado->free();
}
else{
    $respuesta = [
        'estado' => 'MAL',
        'mensaje' => 'No se encontraron datos'
    ];
}
 
echo json_encode($respuesta);
$conexion->close();
 

Tengo dos formularios, uno para realizar la búsqueda y el otro que contiene los campos que rellenaré con los resultados de la búsqueda. Cuando envíe el dato escrito hacia el archivo buscar.php para realizar la búsqueda en la base de datos, se producirá el evento submit, el cual cancelaré utilizando el método .preventDefault(). Una vez cancelado dicho evento, puedo realizar la búsqueda con el método $.ajax.

A dicho método le paso el nombre del archivo en el que se realizará la búsqueda en la base de datos (propiedad action), el tipo de método de envío de datos a usar (propiedad method), la cadena de consulta con el nombre de la caja de texto en la que el usuario escribió el dato a buscar y el propio dato (método .serialize()) y el tipo de datos que recibiremos como respuesta, que, en este caso, será un objeto JSON.

Si la respuesta a la petición es exitosa (método .done()), ejecutamos una función en la cual verificamos que el valor de la propiedad estado de la respuesta recibida (la cual se estableció en el archivo PHP) sea igual a OK; de ser así, llenamos los campos del segundo formulario con los valores que contiene la respuesta. Si el valor de estado es diferente a OK, quiere decir que no se encontraron datos en la búsqueda y pasamos a mostrar un mensaje que alerte de esto al usuario.

Si se produjo un error durante la petición asíncrona (método .fail()), ejecutamos una función que muestre el respectivo mensaje de error mediante un mensaje de alerta.

En el archivo PHP, realizamos la conexión a la base de datos (método mysqli_connect) y en caso de no realizarse (método mysqli_connect_errno), imprimo un mensaje indicando el error suscitado (método mysqli_connect_error) y termino la ejecución del script (función exit). Si lo anterior (el error en la conexión) no llegara a suceder, proseguimos con la ejecución del resto de instrucciones del script.

Recibo el dato escrito en la caja de texto del primer formulario y lo filtro para evitar ejecutar la consulta SQL con algún dato malicioso. Para esto, utilizo las funciones trim y strip_tags y el método mysqli_real_escape_string.

Una vez limpio el dato, armo la respectiva consulta SQL y la ejecuto utilizando el método mysqli_query o imprimo un mensaje de error (método mysqli_error) y termino la ejecución del script (función exit) si se produjo algún error al intentar ejecutar la consulta. Si esto último no se produce, proseguimos con la ejecución del resto del script.

Si la consulta devuelve resultados (método mysqli_num_rows), creo un array asociativo con dichos resultados (método mysqli_fetch_array), creo un array que contendrá los índices y valores que enviaremos como respuesta a la petición que realizamos en el archivo anterior (el que contiene a los formularios) y libero a la memoria de los resultados obtenidos (método mysqli_free_result). Si no logramos obtener resultados de la búsqueda, el array pasará a tener otros valores que también devolveremos como respuesta.

Finalmente, codifico al array en formato JSON (función json_encode), la imprimo y cierro la conexión (método mysqli_close).

Es precisamente por darle esta codificación JSON al array que en la respuesta del método $.ajax puedes acceder a los valores del mismo mediante sus índices.

Cabe señalar que, para este ejemplo, utilicé la forma orientada a objetos de los métodos de la extensión mejorada MySQLi, pero también puedes usar la forma por procedimientos, la cual se explica mediante ejemplos en las páginas hacia las cuales te redirigirán los enlaces que he indicado a lo largo de esta respuesta. Asimismo, si hay algo que no comprendas de este ejemplo, te sugiero consultar primero la información brindada en los manuales hacia los cuales te llevarán los enlaces (las palabras resaltadas en anaranjado) antes de volver a preguntar por acá.

Adapta todo lo que te he explicado a lo que necesitas. No vayas a limitarte a copiar y pegar porque ese sería el más grande error que podrías cometer.

ATENCIÓN: Si la versión de PHP que usas es inferior a la 5.4, en lugar de usar corchetes [] para crear los arrays, deberás de usar el constructor clásico array().

Saludos