Ajax fácil, segunda parte

Bueno, continuando con el anterior ejemplo Ajax fácil, primera parte, ahora veremos algo que no expliqué en dicho posteo para no hacerlo demasiado largo.

Lo que hicimos en esta primer parte fue una aplicación chiquita que tenía un campo de texto y un botón y al ingresar el legajo de un empleado en ese campo nos devolvía una cadena con los datos de ese empleado, algo como “Nombre y apellido: Cornelio Del Rancho / Departamento: Sistemas”.

Ahora bien, devolver una cadena desde el controlador PHP donde llega la petición ajax tiene una desventaja. Tal vez nosotros no queremos devolver esa cadena concatenada con el nombre, apellido y departamento en donde trabaja ese empleado, tal vez lo que nosotros queremos es recuperar esos tres datos, pero en forma separada, osea que en lugar de recuperar una cadena con el valor “Nombre y apellido: Cornelio Del Rancho / Departamento: Sistemas” queramos recuperar tres cadenas separadas con los datos: “Cornelio”, “Del Rancho” y “Sistemas”.

¿Se puede recuperar desde ajax tres cadenas en lugar de una? En realidad lo que podemos hacer es devolver desde el controlador PHP un string en forma de json, y desde javascript convertir esa cadena en un verdadero json. ¿Parece difícil? Tal vez, pero realmente no lo es.

Comencemos, al igual que en el anterior ejemplo habrá tres elementos html, un campo de entrada, un botón y un div vacío para mostrar las respuestas de la petición. Ningún cambio:

<form action="javascript:void(0);">
    <label> Buscar empleado por legajo: </label>
    <input type="text" name="legajo" id="legajo" />
    <input type="submit" id="boton_buscar_legajo" />
    <div id="respuesta"></div>
</form>

Ahora, para recuperar la respuesta del servidor en forma de un objeto y no de string tendremos que agregar una propiedad más al json que recibe como parámetro el método .ajax() de Jquery, que será la propiedad dataType, recibirá un valor ‘JSON’, otros valores posibles son ‘xml’, ‘html’ y ‘script’, podríamos usar xml, pero en este caso recuperaremos los datos en forma de json, ya que es más fácil y más cómodo.

<!-- Importación de la librería de jquery. -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>

<script type="text/javascript"> 
    //Función que envía la petición ajax.
    function buscar_legajo(){
       $.ajax({
          url: 'buscar_empleado.php',
          type: 'POST',
          timeout: 10000,
          data: {legajo: $("#legajo").val()},
          dataType: 'JSON',
          beforeSend: function(){
             $("#respuesta").html('Buscando legajo...');
          },
          error: function(){
             $("#respuesta").html('');
             alert('Ha surgido un error.')
          },
          success: function(respuesta){
             if(respuesta){
                $("#respuesta").html('Nombre y apellido: ' + respuesta.nombre + ' ' + respuesta.apellido + ' / Departamento: ' + respuesta.departamento);
             }else{
                $("#respuesta").html('El numero de legajo no le corresponde a ningun empleado');
             }
          }
       })
    } 
    $(document).ready(function(){
       $("#boton_buscar_legajo").click(function(){
          buscar_legajo();
       });
    }); 
</script>

Comprueben que en la función buscar_legajo() hay dos cambios con respecto a como la habíamos programado en el otro ejemplo. Primero le agregamos al json que recibe el método .ajax() un nuevo valor: dataType: ‘JSON’, además el método success() no muestra el valor ‘respuesta’ como lo trae desde el controlador PHP, sino que lo trabaja como un json. Si el controlador le devuelve algo, asume que es un objeto con esta estructura:

{"legajo":"10003","nombre":"Cornelio","apellido":"Del Rancho","departamento":"Sistemas"}

Bien, el código quedaría así:

<!DOCTYPE html>
<html>
 <head>
    <!-- Importación de la librería de jquery. -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript"> 
       //Función que envía la petición ajax.
       function buscar_legajo(){
          $.ajax({
 url: 'buscar_empleado.php',
             type: 'POST',
             timeout: 10000,
             data: {legajo: $("#legajo").val()},
             dataType: 'JSON',
             beforeSend: function(){
                $("#respuesta").html('Buscando legajo...');
             },
             error: function(){
                $("#respuesta").html('');
                alert('Ha surgido un error.')
             },
             success: function(respuesta){
                if(respuesta){
                   $("#respuesta").html('Nombre y apellido: ' + respuesta.nombre + ' ' + respuesta.apellido + ' / Departamento: ' + respuesta.departamento);
                }else{
                   $("#respuesta").html('El numero de legajo no le corresponde a ningun empleado');
                }
             }
          })
       } 
    $(document).ready(function(){
       $("#boton_buscar_legajo").click(function(){
          buscar_legajo();
       });
    });
 </script> 
 </head>
 <body> 
    <form action="javascript:void(0);">
       <label> Buscar empleado por legajo: </label>
       <input type="text" name="legajo" id="legajo" />
       <input type="submit" id="boton_buscar_legajo" />
       <div id="respuesta"></div>
    </form> 
 </body>
</html>

Y ahora crearemos el controlador PHP donde llegará la petición con el nombre buscar_empleado.php, al igual que como lo hicimos en el anterior ejemplo:

<?php
 if(isset($_POST['legajo'])){ 
    //Guarda el legajo que llego vía ajax. en una varibale.
    $legajo = $_POST['legajo'];
    //Lista de empleados.
    $empleados = array(
       array('legajo' => '10001', 'nombre' => 'Cosme', 'apellido' => 'Fulanito', 'departamento' => 'Estadisticas'),
       array('legajo' => '10002', 'nombre' => 'Lola', 'apellido' => 'Landa', 'departamento' => 'Recursos humanos'),
       array('legajo' => '10003', 'nombre' => 'Cornelio', 'apellido' => 'Del Rancho', 'departamento' => 'Sistemas')
    );
    //Variable que guardará los datos del empleado a buscar. Por defecto guardará null.
    $empleado = null;
    foreach($empleados as $item){
       //Verifica si el legajo es uno de los que está en la lista.
       if($item['legajo'] == $legajo){
          //Guarda los datos del empleado que fue encontrado y finaliza el ciclo del foreach.
          $empleado = $item;
          break;
       }
    }
    if($empleado){
       $empleado = json_encode($empleado);
    } 
    echo $empleado; 
 }else{
    echo ':(';
 } 
?>

Como ven, en el script utilizamos una función de PHP json_encode() que lo que hace es convertir un array asociativo en un string con aspecto de json. Osea algo cómo esto:

array('legajo' => '10003', 'nombre' => 'Cornelio', 'apellido' => 'Del Rancho', 'departamento' => 'Sistemas')

En esto:

{"legajo":"10003","nombre":"Cornelio","apellido":"Del Rancho","departamento":"Sistemas"}

Luego, al recuperarse este esta cadena con el método .ajax() si le agregamos al json que recibe como parámetro una propiedad dataType seteada en ‘JSON’ para convertir esa cadena en un objeto json.

¿Fácil?, facilísimo. Como ven ajax es muy fácil.

Bueno, me despido. Cualquier duda, consulta o sugerencia por acá me lo dicen.

Saludos!

Anterior: Ajax fácil, primera parte

Siguiente: Ajax fácil, tercera parte (Subir archivos al servidor)


2 Respuestas a “Ajax fácil, segunda parte”

  1. Hola, el ejemplo es perfecto, pero probando un buen tiempo (1 hora) por que me tiraba error: alert(‘Ha surgido un error.’)

    Me puse a modificar,asi se aprende más 🙂 pero cansa 🙁
    al veces me andaba y no me andaba, por ultimo modifice la variable en php $empleado = null; por esta $empleado = 0;
    Ahi me andaba todo perfecto, sabrias decirme porque:

    -con el null me tira error si no ingreso ningun dato en el input?
    -en cambio reemplazando el null por el cero, asi no ingrese ningun dato en el input, funciona normal

    No se si me entiendes, igual ya lo tengo solucionado solo esa duda del null, gracias y disculpas las preguntas!!