Buscador PHP Jquery AJAX JSON ~ PABLETORETO

Para ejemplificar el uso de las tecnologias PHP-Jquery-AJAX-JSON se muestra la codificación de un buscador realizado en PHP que utiliza Jquery con su metodo $.ajax para hacer peticiones asincrónicas sobre una base de datos MySQL y que recibe un resultado especifico en formato JSON, este resultado es mostrado al usuario en un div ubicado en la pagina buscador.php.

Primero muestro el script de la tabla empleado_php

USE `ejemplo`;

DROP TABLE IF EXISTS `empleado_php`;

CREATE TABLE `empleado_php` (
  `ID` varchar(8) NOT NULL,
  `Nombre` varchar(50) DEFAULT NULL,
  `cargo` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`ID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

insert  into `empleado_php`(`ID`,`Nombre`,`cargo`) values 
('PHP001','Pablo Ernesto Tobar Mayora','Web Programmer'),
('PHP002','Pabletoreto Blogger','Blogger Manager'),
('PHP003','prueba de stored procedure en MySQL','Database Administrator'),
('PHP004','Prueba de funciones en MySQL','Database Tester');

Para evitar confusión quiero hacer notar que siempre codifico los formularios con extensión php aunque como pueden ver en el código no se utiliza mas que HTML por ende el formulario buscador puede tener extensión PHP(buscador.php) o bien extensión HTML(buscador.html)

<?php
//html lang="es-ES"
//head




BUSCADOR
//head



 Buscador Asincrono
ID a buscar: 









Datos empleado seran mostrados aqui...



ID
Nombre
Cargo

Lo importante comienza con especificar el lenguaje de nuestro formulario y la declaración de una directiva pragma en la etiqueta head del formulario a fin de codificar los caracteres que se enviaran, también es importante notar que se agrega la libreria Jquery en la etiqueta script del documento así como también un documento javascript llamado jquery,js ubicado en la carpeta javascript que realizara la petición asincronica,para terminar se utilizara una hoja de estilos llamada estilos.css ubicada en la carpeta content.

Se muestra el código de jquery.js en este se evita que se envíe el formulario a su action="process.php", en vez de eso, se toma el dato de búsqueda y se valida que no este vacío en la función validaForm(), como solo se tiene un dato solo se valida que exista (pero las validaciones en un formulario pueden ser mas complejas) para luego tomar el valor y enviarlo a process.php utilizando el método $.ajax()

$(document).ready(function() {
  $("#form_id").submit(function(e){
    e.preventDefault(); 
 preparar();
     if(validaForm()){  
    requestInfo();
 }
     else {return ; }  
  });
});

function preparar(){
  $("#submit_id").hide();
  $("#ajax_id").html("");
  $("#LoadingImage").show();
  $("#ajax_id").html("
realizando busqueda
");
}
 
function validaForm(){
 var id_val = $("input#ID_id").val().trim(); 
  if((id_val=="") || id_val.replace(/s+/,'') == ''){
   alert("Favor ingrese el ID");
   $("input#ID_id").addClass("posicionamiento");
   $("#ajax_id").html("
Debe especificar el nombre
");
 return false;
  }else{ 
   $("input#ID_id").removeClass("posicionamiento");
   $("#div_id").empty();
  }
 return true;
} 

function requestInfo(){
   
 var url = $("#form_id").attr('action'); 
 var data = $("#form_id").serialize();   
 var type = $("#form_id").attr('method');
  
 $.ajax({
    url:url,          
    data:data,       
    type:type,      
    cache: false,  
    contentType: "application/x-www-form-urlencoded", 
    dataType: 'json', 
    encode: true,
 })   
    
.done(function(data) { 
if(data.status != "ERROR"){
$("#infoemp tbody").html("");
$("#ajax_id").html(""); 
$("#submit_id").show();
$("#LoadingImage").remove();

if(data.total > 0){
$("#ajax_id").html("
" +data.total+ "
");
$("#infoemp").show();

$.each(data.info, function(i,user){
var tblRow =
""
+""+user.ID+"

"
+""+user.Nombre+"

"
+""+user.cargo+"

"
+"" ;
$(tblRow).appendTo("#infoemp tbody");
});
} else {
 $("#ajax_id").html("
No se encontraron resultados 
");
}

} else {  
alert("lee .......... ERROR");
$("#LoadingImage").remove();
$("#ajax_id").html(""); 
$("#ajax_id").html(data.error_msg).addClass("cargando"); }
})
    
.fail(function( jqXHR, textStatus, errorThrown ) {
    // if ( console && console.log ) {
    //console.log( "La solicitud a fallado: " +  errorThrown); }
   $("#LoadingImage").remove();
   $("#ajax_id").html(""); 
   $("#submit_id").show();
   alert( "La solicitud a fallado: " +  errorThrown);
    //}
 });
}

en caso no quieras serializar la información directamente del formulario sino crearla por tu cuenta e incluso agregar mas información puedes utilizar un array de la siguiente manera

 var array = new Object(); 
  array['tag'] = "login";
  array['usuario'] = $("#user").val(); 
  array['password'] = $.md5($("#pass1").val());

el código de process.php se encarga de conectarse a la base de datos utilizando mysqli y buscar el registro especifico

<?php
mysqli_report(MYSQLI_REPORT_STRICT);

$bd = "ejemplo";
$server ="localhost";
$user = "root";
$password = "";

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {

 $var = array (
  "status" => "",        // "OK "| "FALSE"
  "total" => intval(0),  // total de registros encontrados
  "info" => "",          // registros encontrados
  "error_msg" => ""      // mensaje de error
     );

 if (isset($_POST['ID_name'])) {
  $valor = filter_var($_POST['ID_name'], FILTER_SANITIZE_STRING);
    
 if(empty($valor)){
  $var["status"]="ERROR";
  $var["error_msg"]="Debe especificar el ID"; 
 }

 try {

  $mysqli = mysqli_connect($server, $user, $password, $bd);
  $prepared_st = $mysqli->prepare("SELECT * FROM empleado_php WHERE ID = ?");
  $prepared_st->bind_param("s",$valor);
  $prepared_st->execute();
    
   $var["status"]="OK";
   $result = $prepared_st->get_result();  
    if($result->num_rows>0){   
     $var["total"]=$result->num_rows;
      while($obj = mysqli_fetch_assoc($result)) {
       $var["info"][] = array_map('utf8_encode', $obj);
       //$var["info"][] = $obj;
    }
   }

 else { $var['total']=0; }
  
   $result->close();
   $mysqli->close(); 

 } catch (Exception $e ) {
   $var["status"]="ERROR";
   $var["error_msg"]="message: " . $e->message;  
 }
   
header('Content-type: application/json; charset=utf-8');   
echo json_encode($var);
exit();
}
else
header('Location: http://localhost:8080/buscador/buscador.php');
}
else
header('Location: http://localhost:8080/buscador/buscador.php'); 
?>

por ultimo el código de estilos.css

label {
display:block;
margin-top:20px;
letter-spacing:1px;
}

form {
display:block;
margin:0 auto;
width:400px;
font-family:Arial;
color: #666666;
}

.posicionamiento{
    border:2px solid red;
 color:black;
 background-color:white;
 width:350px;
    font-size:16px;
}

input, textarea {
width:350px;
height:40px;
background:#666666;
border:2px solid #f6f6f6;
padding:10px;
margin-top:3px;
font-size:15px;
color:#ffffff;
}

#submit_id {
width:85px;
height:35px;
border:none;
margin-top:20px;
cursor:pointer;
}

.info, .exito, .alerta, .error { 
       text-align:center;
       width: 330px;
       font-family:Arial, Helvetica, sans-serif;  
       font-size:13px; 
       border: 1px solid; 
       margin: 0 auto; 
       padding:15px 10px 15px 50px; 
       background-repeat: no-repeat; 
       background-position: 10px center; 
} 
.info { 
       color: #00529B; 
       background-color: #BDE5F8; 
       background-image: url('imagenes/info.png'); 
} 
.exito { 
       color: #4F8A10; 
       background-color: #DFF2BF; 
       background-image:url('imagenes/exito.png'); 
} 
.alerta { 
       color: #9F6000; 
       background-color: #FEEFB3; 
       background-image: url('imagenes/alerta.png'); 
} 
.error { 
       margin:0 auto;
    width:250px;
    color: #D8000C; 
       background-color: #FFBABA; 
       background-image: url('imagenes/error_.png'); 
} 

.cargando{
margin:0 auto;
width:250px;
    color: #D8000C; 
       background-color: white; 
       background-image: url('imagenes/cargando.gif');
}

y las imágenes utilizadas