Laravel, parte 13: Ajax

16 Mar

Un tema que hoy día no puede faltar en una aplicación web, es la posibilidad de enviar peticiones al servidor mediante Ajax. No voy a redundar en esto, ya que mi intención es mostrar un simple ejemplo de cómo usar Ajax dentro de Laravel. Pero si aun no sabés de qué se trata Ajax, te invito a visitar estas publicaciones que hice hace un tiempo explicando esta tecnología:

http://fernando-gaitan.com.ar/jquery-parte-11-ajax/

Bueno, en esta ocasión, para dar un ejemplo fácil de comprender, voy a evitar el uso de base de datos, y voy a utilizar un array como proveedor de datos. El mismo consistirá en lo siguiente: habrá un campo de ingreso, para el legajo de un empleado, y un botón que al pulsarlo, sin recargar la página, buscará en ese array un legajo que le pertenezca a alguno de esos usuarios. De ser así, nos devolverá la posición con los datos del empleado, sino nos devolverá un 0, para que Javascript pueda comprender que no ha devuelto ningún resultado.

En primer lugar vamos a ir a nuestro archivo routes.php y vamos a agregar un nuevo controlador:

Route::controller('legajos', 'LegajosController');

Acto seguido crearemos este controlador yendo a app -> controllers, y agregamos un nuevo archivo con el nombre: LegajosController.php, con el siguiente código:

<?php
class LegajosController extends BaseController { 
   public function getBuscar(){
      return View::make('legajos.buscar');
   } 
   public function postBuscar(){
      $empleados = array(
         array(
            'legajo' => '123',
            'nombre' => 'Cornelio',
            'apellido' => 'Del Rancho',
            'area' => 'Programación'
         ),
         array(
            'legajo' => '456',
            'nombre' => 'Modesto',
            'apellido' => 'Rosado',
            'area' => 'Recursos humanos'
         ),
         array(
            'legajo' => '789',
            'nombre' => 'Humberto',
            'apellido' => 'Vélez',
            'area' => 'Seguridad'
         )
       );
       $legajo = Input::get('legajo');
       foreach($empleados as $item){
          if($item['legajo'] == $legajo){
             return Response::json($item);
          }
       }
       return 0;
    }
}
?>

El primer método: getBuscar(), nos mostrará la vista con el formulario para buscar el empleado por el legajo, mientras que postBuscar(), nos devolverá una cadena con formato json de encontrar el legajo, de lo contrario nos devolverá 0:

return Response::json($item);

Ahora vamos a crear el formulario para nuestra búsqueda yendo a app -> views, aquí crearemos una nueva carpeta llamada legajos, y dentro un archivo llamado llamado buscar.blade.php con el siguiente código:

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8">
    <title> Buscar legajos </title>
    {{ HTML::style('css/bootstrap.css') }}
    {{ HTML::script('js/jquery-1.11.0.min.js') }}
 </head>
 <body>
    <div class="container">
       <h1> Buscar legajos </h1>
       <div class="row">
          <div class="col-lg-4">
             {{ Form::open(array('onsubmit' => 'return false', 'id' => 'formulario_busqueda')) }}
                {{ Form::label ('legajo', 'Legajo') }}
                {{ Form::text ('legajo', '') }}
                {{ Form::submit('Buscar', array('class' => 'btn btn-success')) }}
             {{ Form::close() }}
          </div>
          <div id="respuesta" class="col-lg-5">
          </div>
       </div>
    </div>
    <script type="text/javascript">
       (function() {
          $("#formulario_busqueda").submit(function() {
             $.ajax({
                url: '/legajos/buscar',
                type: 'POST',
                data: {legajo: $("#legajo").val()},
                dataType: 'JSON',
                beforeSend: function() {
                   $("#respuesta").html('Buscando empleado...');
                },
                error: function() {
                   $("#respuesta").html('<div> Ha surgido un error. </div>');
                },
                success: function(respuesta) {
                   if (respuesta) {
                      var html = '<div>';
                      html += '<ul>';
                      html += '<li> Legajo: ' + respuesta.legajo + ' </li>';
                      html += '<li> Nombre: ' + respuesta.nombre + ' </li>';
                      html += '<li> Apellido: ' + respuesta.apellido + ' </li>';
                      html += '<li> Area: ' + respuesta.area + ' </li>';
                      html += '</ul>';
                      html += '</div>';
                      $("#respuesta").html(html);
                   } else {
                      $("#respuesta").html('<div> No hay ningún empleado con ese legajo. </div>');
                   }
                }
             });
             $("#legajo").val('');
          });
       }).call(this);
    </script>
 </body>
</html>

Como se ve en el código, agregamos una hoja de estilos de Twitter Bootstrap, que si bien no es necesaria para que funcione el ejemplo, le dará un mejor aspecto a la interfaz de nuestra página

{{ HTML::style('css/bootstrap.css') }}

Y la versión 1.11.0 de Jquery:

{{ HTML::script('js/jquery-1.11.0.min.js') }}

La librería de Jquery sí es necesaria para usar el método .ajax().

Luego tendremos un formulario con un campo de ingreso, y un botón, que al pulsar buscará el legajo:

{{ Form::open(array('onsubmit' => 'return false', 'id' => 'formulario_busqueda')) }}
   {{ Form::label ('legajo', 'Legajo') }}
   {{ Form::text ('legajo', '') }}
   {{ Form::submit('Buscar', array('class' => 'btn btn-success')) }}
{{ Form::close() }}

Un div vacío para mostrar la respuesta del servidor:

<div id="respuesta">
</div>

Y finalmente al pulsar en el botón del formulario, hacemos una llamada Ajax:

$.ajax({
   url: '/legajos/buscar',
   type: 'POST',
   data: {legajo: $("#legajo").val()},
   dataType: 'JSON',
   beforeSend: function() {
      $("#respuesta").html('Buscando empleado...');
   },
   error: function() {
      $("#respuesta").html('<div> Ha surgido un error. </div>');
   },
   success: function(respuesta) {
      if (respuesta) {
         var html = '<div>';
         html += '<ul>';
         html += '<li> Legajo: ' + respuesta.legajo + ' </li>';
         html += '<li> Nombre: ' + respuesta.nombre + ' </li>';
         html += '<li> Apellido: ' + respuesta.apellido + ' </li>';
         html += '<li> Area: ' + respuesta.area + ' </li>';
         html += '</ul>';
         html += '</div>';
         $("#respuesta").html(html);
      } else {
         $("#respuesta").html('<div> No hay ningún empleado con ese legajo. </div>');
      }
   }
});

Saludos!

Descargar ejemplo.

Anterior: Laravel, parte 12: Javascript, Css e imágenes

 

Redes sociables

    21 thoughts on “Laravel, parte 13: Ajax

    1. El ejemplo está muy bien, pero a la hora de probarlo he bajado los archivos y no me funciona. Como no está el proyecto completo lo que hice fue crear un proyecto laravel y luego copiar los archivos. Mi problema es que siempre me sale que ha surgido un error. Y no entiendo porqué. ¿Tienes alguna idea?
      Muchas gracias

      • Mmm… extraño, por lo que me decís, la petición nunca llega a su destino, osea al método postBuscar().

        Estás usando la versión 4 de Laravel o una anterior?

        En cualquier caso, probá lo siguiente, en tu vista, donde enviás el ajax. Reemplazá:

        url: ‘/legajos/buscar’

        Por

        url: ‘buscar’

        Otra cosa que podés hacer es usar el método Request::ajax() en postBuscar():

        public function postBuscar() {
        if (Request::ajax()) {
        //Resto del código
        }
        }

        Saludos!

        • Cambiando la url por buscar me funciona. Ahora la cuestión es si me puedes explicar por qué. No soy un entendido ni de ajax ni de laravel, pero hasta donde comprendía en url debía ir la dirección del formulario que sería /legajos/buscar y no sólo buscar.
          Muchas gracias por tu tiempo.

          • Eso depende de cómo se acceda a la url en tu proyecto. En mi caso es:

            http://localhost:8000/legajos/buscar

            getBuscar() se dispara si se accede a esa petición por GET, y postBuscar() se dispara si se accede a esa petición por POST.

            Esa propiedad url, debe editarse de la forma en que estoy parado en este momento, hacia dónde debe ir la petición.

            Saludos!

            • La cuestión es que mi proyecto es la reproducción del tuyo. No tengo nada configurado así que accedo como “http://localhost/prueba_ajax/public/legajos/buscar”. Así que no sé porque no funciona la petición ajax con la url legajos/buscar pero sí poniendo sólo buscar.

            • Bueno, ahí está el tema. Vos estás accediendo a una url “http://localhost/prueba_ajax/public/legajos/buscar”, por tanto si dejás la propiedad con ese valor:

              url: ‘/legajos/buscar’

              Es como si estuvieses enviando una petición a:

              http://localhost/legajos/buscar

    2. Muchas gracias Fernando, por el esfuerzo de publicar y compartir tus conocimientos.
      He seguido este curso de Laravel 4 desde el principio pues soy novato con Laravel y la programación para mí es un Hobby, pues soy Contador y la profesión me deja poco tiempo.
      He experimentado algunas dificultades para lograr que funcionen tus ejemplos, pero supongo que esto contribuye al aprendizaje, en todo caso todo funciona bien, en especial este último capítulo que has agregado.
      Cuán difícil será adaptar esta búsqueda sobre una tabla ¿?
      Nuevamente, Gracias por alegrarme la vida.
      Desde la Araucania Chile

      • Herberk, primero que nada gracias por comentar. Me alegro que te guste programar, seguro te servirá para crear tus propias aplicaciones contables, jeje 🙂

        Con respecto a tu pregunta, en realidad, en este ejemplo yo evité usar base de datos, para hacerlo más liviano, y fácil de entender. Pero en una petición Ajax, todo sigue siendo igual, osea que la acción donde se procesan los datos, deberías realizar alguna query, y devolver la respuesta como acá con Response::json()

        Podés, chequear la documentación de Laravel 4

        http://laravel.com/docs/eloquent

        Cualquier cosa, si necesitás ayuda, defime y te doy una mano.

        Saludos!

    3. Buenas noches 🙂
      Espero que estén bien, que excelente tuto 😀 felicitaciones, y gracias por compartir tu conocimiento.
      no han subido mas? este es el ultimo?

      Salu2 desde Colombia

    4. Gracias por este tutorial de verdad me sirvió de mucha ayuda,me pregunto si podría hacer una entrada explicando como funcionar angular.js y laravel.

      • Gracias a vos por comentar.

        De momento ando medio complicado, pero cuando me haga un tiempito lo subo.

        Saludos!

    5. Gracias por el tutorial me sirvio de mucha ayuda para un pequeño proyecto que estoy realizando en laravel 4.2.

    6. ¡Buenos días!

      Con tu permiso, voy a dejar una pequeña modificación para que la gente no tan experta —como yo— no tenga problemas por el tema de la URL.

      Es muy sencillo:

      (function() {
      $(“#formulario_busqueda”).submit(function() {
      var url_base = “{{ url() }}”;
      $.ajax({
      url: url_base + ‘/legajos/buscar’,
      type: ‘POST’,
      … RESTO DE SCRIPT …

      A la función le he añadido una variable (url_base) que, como su nombre indica, “recoge” la URL principal que estemos usando: “localhost”, “localhost/nombre_aplicacion/”, “localhost/nombre_aplicacion/public”, etc

      Luego, a la parte de “url:” de AJAX, simplemente he sumado la variable a “/legajos/buscar” quedando la línea así: “url: url_base + ‘/legajos/buscar’,”

      Sí; ya sé que no es la mejor opción, pero bueno. Espero que le sirva a quien ande un poco perdido.

      ¡Un saludo!

    7. Agradezco por este tuto, el cual me ha sido de gran ayuda, necesito de su colaboración con la siguiente consulta.
      cuando quiero hacer la búsqueda en una tabla sql server.
      mi consulta es

      $contratista = Gentercer::where('GENTERCER.TERNUMDOC', '=',Input::get('legajo'))
      ->select(
      DB::raw("GENTERCER.TERPRINOM + '&nbsp' + GENTERCER.TERSEGNOM AS nombres"),
      DB::raw("GENTERCER.TERPRIAPE + '&nbsp'+ GENTERCER.TERSEGAPE AS apellidos")
      )->get();
      // $nombre = $contratista.nombres; ACÁ ME GENERA ERROR

      //esta línea no la he podido ejecutar, y la necesito para armar el arreglo a enviar por Json,
      $nombre = $contratista.nombres; ACÁ ME GENERA ERROR
      $id =Input::get('legajo');
      $nombre = $contratista.nombres;
      $apellidos = $contratista.apellidos;

      $empleados = array(

      'legajo' => $id,
      'nombres' => $nombre,
      'apellidos' => $apellidos,
      'area' => 'Programación'

      );
      return Response::json($empleados);

    Comments are closed.