BUSCAR REGISTROS POR AJAX
Devolviendo varios registros o mensaje si no se lo encuentra
Devolviendo varios registros o mensaje si no se lo encuentra
1) Página html, Body
Nada nuevo aquí, primero cargamos la tabla completa, solo para ver si funciona la búsqueda. Llenamos el selector con SELECT DISTINCT para que cargue los nombres en el selector, una sola vez, ponemos un botón que llamamos para el AJAX y una div con id="resultado" para cargar el resultado de la busqueda por jquery.
2) Script PHP.
En este archivo arrancamos con <? y terminamos con ?> conteniendo solo código PHP y terminando un echo() con la devolución (en forma de array JSON).
[{"id":"6","nombre":"Carlos","apellido":"Garcia"},{"id":"1","nombre":"Carlos","apellido":"Perez"}]
3) Script AJAX y parse de la devolución.
Como en todo Jqueri todo queda dentro de una función$(document).ready(function()y luego el click sbre el botón $("#buscar").click(function(e) con su correspondiente e.preventDefault();
Nada nuevo aquí, primero cargamos la tabla completa, solo para ver si funciona la búsqueda. Llenamos el selector con SELECT DISTINCT para que cargue los nombres en el selector, una sola vez, ponemos un botón que llamamos para el AJAX y una div con id="resultado" para cargar el resultado de la busqueda por jquery.
2) Script PHP.
En este archivo arrancamos con <? y terminamos con ?> conteniendo solo código PHP y terminando un echo() con la devolución (en forma de array JSON).
- Recibimos el valor a buscar enviado mediante GET por AJAX con $buscado=$_GET["valor"];
- Defino un array genérico con $resultado = array();
- Si no hay registros cargo el array asociativo solo con id Nulo esto me va a servir de señal para pasar el mensaje de "No hay registros"
- Si hay registros con un while voy cargando el array
- Ahora primero codifico con UTF-8 lo que viene de la base de datos por si tiene caracteres no convencionales con mb_convert_encoding(variable,"UTF-8");
- Conarray_push($resultado,array("id" =>$tar["id"],"nombre" => $nombrecorregido,"apellido" => $apellidocorregido)); voy cargando el array de arrays,donde cada elemento de $resultado es a su vez un array asociativo con los campos pedidos
- Finalmente con echo(json_encode($resultado));devolvemos lo pedido en un array JSON
[{"id":"6","nombre":"Carlos","apellido":"Garcia"},{"id":"1","nombre":"Carlos","apellido":"Perez"}]
3) Script AJAX y parse de la devolución.
Como en todo Jqueri todo queda dentro de una función$(document).ready(function()y luego el click sbre el botón $("#buscar").click(function(e) con su correspondiente e.preventDefault();
- Primero borramos todo el contenido de la div resultado con $("#resultado").empty();
- Recupero el valor seleccionado de nombre para buscar con var buscado=$("select[id=personas]").val();
- La llamada a AJAX es estandar solo tener en cuenta el envío de datos por data: 'valor=' + buscado, ya que va por GET, en este caso el script PHP recupera el valor de buscado pasado por $_GET["valor"];
- En la función éxito lo primero es testear si hay registros conif (data.id=="Nulo") que mandamos del script PHP caso de ser TRUE ponemos el mensaje$("#resultado").html("No hay registros...")
- Si en cambio hay, primero declaramos la variable var tabla que va contener toda la tabla, con encabezado y valores. Primero cargamos el encabezado que es estático con "<table><tr><td>ID</td><td>NOMBRE</td><td>APELLIDO</td></tr>"
- Luego parseamos el JSON con$.each(data, function(i, item) {...}
- Cada item del .each es un registro correspondiendo a un <tr></tr>y cada campo se recupera con item.xxx con xxx las claves asociativas de eses campo puestas en el script PHP
1) Código HTML necesario para las funciones
<style>
table{
font-size: 12px;
border-spacing: 0px;
border:none;
}
td{
border-bottom:#333 solid 1px;
margin: 0px;
padding: 5px;
padding-bottom:3px;
padding-top:3px;
width: 20%;
}
</style>
<body>
<div id="resultado" style="display:none; margin-bottom:50px;">
</div>
</body>
2) Código Javascript (Jquery)
<script>
$(document).ready(function(){
$("#buscar").click(function(e){
e.preventDefault();
$("#resultado").empty(); //vacío la div donde va el resultado
var buscado=$("select[id=personas]").val();
$.ajax({
url: "tec-php-procedureajax-procesar.php",
data: 'valor=' + buscado,
method: "GET",
dataType: "json",
success: function(data){
if (data.id=="Nulo"){
$("#resultado").html("No hay registros con el nombre=" + buscado);
}else{
var tabla= "<table><tr><td>ID</td><td>NOMBRE</td><td>APELLIDO</td></tr>";
$.each(data, function(i, item) {
tabla = tabla + ("<tr><td>" + item.id + "</td><td>" + item.nombre + "</td><td>" + item.apellido + "</td></tr>");
});
tabla = tabla + "</table>";
$("#resultado").append(tabla);
}
},
error: function(data){
$("#resultado").html("ERROR");
}
});
$("#resultado").css("display","block");
});
});
</script>
3) Script PHP llamado por AJAX
<?
include("conexion.php");
$buscado=$_GET["valor"]; // recibe de AJAX el nombre del selector
conectar(); // abre la conexión a la base de datos
$resultado = array(); // defino un array genérico
$sqltxt = "SELECT id,nombre,apellido FROM nombres WHERE nombre='" . $buscado . "' ORDER BY apellido" ;
$sqldevolucion = mysqli_query($conn,$sqltxt);
if(mysqli_num_rows($sqldevolucion)==0){ // si no hay registros devuelvo en id "nulo" para poder procesarlo
$resultado["id"]= "Nulo";
}else{
while ($tar = mysqli_fetch_array($sqldevolucion, MYSQLI_ASSOC)){
$nombrecorregido = mb_convert_encoding($tar["nombre"],"UTF-8"); // por si nombre tiene caracteres no ingleses.
array_push($resultado,array("id" =>$tar["id"],"nombre" => $nombrecorregido,"apellido" => $tar["apellido"]));
}
}
mysqli_free_result($sqldevolucion); //devuelvo recurso a memoria
mysqli_close($conn); // cierro conexion
echo(json_encode($resultado)); // devuelvo el vector jsonizado
?>