Utilizando ajax con laravel

En este articulo veremos como hacer una petcion ajax en laravel de varias maneras, pero antes de eso tendremos una pequeña introducción de como usa las librerias y frameworks de javascript laravel.

Contenido del articulo:

Introducción

Por defecto laravel ya viene con varias librerias javascript pre-instaladas, el que sean o no utilizadas es opcional. Estas librerias son jQuery, axios, Bootstrap y Vue.js.

Puede verlas como son incluidas en resources/js/app.js en laravel 5.8 y en otras versiones resources/assets/js/app.js

En caso de no querer usar las librerías puede no usar este archivo en su aplicación o modificarlo a su gusto.

CSRF

Teniendo en cuenta la Protección CSRF.

Para utilizar ajax con laravel lo primero que tenemos que tener en cuenta es que laravel usa CSRF Protection, en este post mostrare como hacerlo utilizando ajax a través de la librería jquery.

En caso de haber intentado usar ajax sin tener en cuenta la protección CSRF probablemente haya recibido un error de token.

¿Que es la Protección CSRF?

El Cross-site request forger es un tipo de ataque que el cual usa un fragmento de código, o también puede ser un fragmento de datos o otras tipo de acciones con el objetivo de aprovechar la vulnerabilidad de seguridad de un sistema informático para conseguir un comportamiento no deseado del mismo estas acciones son realizadas por un usuario que el sitio web confía.

Utilizando el token

Tenga en cuenta poner la siguiente linea en la plantilla que contenga las etiquetas <head></head>.

<meta name="csrf-token" content="{{ csrf_token() }}">

Porque debo agregar esta linea?

La explicación es simple usaremos este meta para almacenar el token.

¿Y que es el token?

Como una explicación simple digamos que es como una llave, si la tienes pasas no la tienes no pasas (es mas elaborado que esto pero como explicación sencilla dejemos-lo ahí).

Utilizando ajax con jquery

Teniendo instalado laravel lo primero que debemos hacer es crear una ruta la cual sera la url en nuestro ajax en el archivo routes/web.php por ejemplo:

Creando una ruta ha nuestro controller

Lo que estamos haciendo aquí es creando una ruta la cual nos enviara a el método index del AjaxController

Route::post('miJqueryAjax','AjaxController@index');

Creando nuestro controller

Luego crearemos el Controller AjaxController, lo creamos en la carpeta App/Http/Controllers.

<?php 
namespace App\Http\Controllers;
use Illuminate\Http\Request;
 class AjaxController extends Controller {
     /**
      * Display a listing of the resource.
      *
      * @return \Illuminate\Http\Response
      */
     public function index()
     {
         echo "im in AjaxController index";//simplemente haremos que devuelva esto
     }
 } 

Si esta haciendo esto desde 0 cree una ruta a la vista que usara.

Route::post('/', function () {
   return view('master');
});

Cree la vista master

En la carpeta resources/views cree la vista master.blade.php las siguientes líneas, los comentarios dan ciertas indicaciones donde poner algunos fragmentos de código así que téngalos en cuenta.

<!DOCTYPE html>
 <html>
    <head>
       <title>this is my mater page</title>
       <style></style>
       //aqui ira meta token
    </head>
    <body>
       <article>
        <header>
            <h1>this is my master page</h1>
        </header>
        <main>
        </main>
        <footer>
            Ejemplo propuesto en blastcoding.com
        </footer>
       <article>
       //pondre todos los script antes de cerrar la etiqueta body
       <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
       //(español)pon el $ajaxSetup aqui . (english) copy $.ajaxSetup here
       //(español)pon el $.ajax aqui . (english) copy $.ajax code here    </body>
</html> 

Recuerda que en este post lo único que buscamos es que ande ajax así que el ejemplo dado es lo mas simple posible.

Agregando el token a todos los header request

Luego de las lineas de la ruta del CDN de jQuery cree un script con las siguientes lineas. Con este script estoy tomando el valor del token para pasarlo luego en la futura petición.

$.ajaxSetup({
     headers: {
         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')     
     }
 }); 

Ahora hagamos nuestro script jquery en las cuales utilizaremos ajax le enviaremos datos a través de data en este caso sera un json {‘name’:»luis»}.

$('#myajax').click(function(){
       //we will send data and recive data fom our AjaxController
       $.ajax({
          url:'miJqueryAjax',
          data:{'name':"luis"},
          type:'post',
          success: function (response) {
                      alert(response);
          },
          statusCode: {
             404: function() {
                alert('web not found');
             }
          },
          error:function(x,xs,xt){
              //nos dara el error si es que hay alguno
              window.open(JSON.stringify(x));
              //alert('error: ' + JSON.stringify(x) +"\n error string: "+ xs + "\n error throwed: " + xt);
          }
       });
});

Finalmente luego de agregar la etiqueta meta para almacenar nuestro token, el script que añadirá nuestro token a todos los request a los headers solicitados y agregar nuestro script para utilizar ajax a nuestra vista master.blade.php esta debería quedar de la siguiente manera.

<!DOCTYPE html>
 <html>
    <head>
         <title>this is my mater page</title>
         <style></style>
         <meta name="csrf-token" content="{{ csrf_token() }}">
    </head>
    <body>
         <article>
             <header>
                    <h1>this is my master page</h1>
             </header>
             <main>
                 <button id='myajax'>click me</button>
             </main>
             <footer>
 </footer>
         </article>
       {{--all my scripts goes here--}}
       <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
       <script type = "text/javascript">
         $.ajaxSetup({
             headers: {
                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
             }
         });
         $('#myajax').click(function(){
            //we will send data and recive data fom our AjaxController
            //alert("im just clicked click me");
            $.ajax({
               url:'miJqueryAjax',
               data:{'name':"luis"},
               type:'post',
               success:  function (response) {
                  alert(response);
               },
               statusCode: {
                  404: function() {
                     alert('web not found');
                  }
               },
               error:function(x,xs,xt){
                  window.open(JSON.stringify(x));
                  //alert('error: ' + JSON.stringify(x) +"\n error string: "+ xs + "\n error throwed: " + xt);
               }
            });
             });
       </script>
    </body>
 </html>

Ya vimos como funciona ajax en laravel con jquery ahora veamos otras formas de hacer una peticion ajax.

Axios

Ajax en laravel con axios

en este ejemplo creare una ruta a la llamare tochange:

Route::get('tochange',function(){
 return view("ajaxexample");
});

utilizare un controlador llamado ClienteController que ya tengo y le agregare el siguiente método.

public function message(){
        return "Hola gracias por entrar a este articulo";
}

Creare esta vista en mi caso le he puesto de nombre «ajaxexample», en esta vista tendremos un botón, este llamara a la función axaj() la cual hará una petición con axios.

como puede ver también hay un @include(‘tochange’), esa vista que se llama to change que querríamos cambiar. Por ahora solo veremos como hacer la petición.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Utilizando ajax con Axios</title>
<meta name="description" content="Utilizando ajax con Axios">
<meta name="author" content="Blastcoding">
<link rel="stylesheet">
</head>
<body>
<input type="button" name="" id="btnajax" class="btn btn-primary" role="button" onclick="axaj()" value="click me">
@include("tochange")
<script src={{ asset('js/app.js')}}></script>
<script>
function axaj(){
    axios.get('/cliente/message')
    .then(function (response) {
        // handle success
        console.log(response);
    })
    .catch(function (error) {
        // handle error
        console.log(error);
    });
}
</script>
</body>
</html>

ademas de esta vista creare otra mas que sera mi partialview «tochange»

<div id="mycontent">
 All my content goes here my friend
</div>

y ya lo podriamos provar lendo a nuestra ruta en mi caso
http://localhost:8000/tochange <- link si solo esta copiando el codigo

clickeamos el boton y vamos a l inspector, consola y vemos que paso:

y felicitaciones obtuvimos el valor que queriamos sin recargar la pagina

como puede ver el codigo de axios es solamente este.

<script>
function axaj(){
    axios.get('/cliente/message')
    .then(function (response) {
        // handle success
        console.log(response);
    })
    .catch(function (error) {
        // handle error
        console.log(error);
    });
}
</script>

Ahora cambiemos lo un poco para que cambie nuestro texto al hacer click.

function axaj(){
    axios.get('/cliente/message',{responseType:'html'})
    .then(function (response) {
    
        var contentdiv = document.getElementById("mycontent");
        contentdiv.innerHTML=response.data;

    })
    .catch(function (error) {
        // handle error
        console.log(error);
    });
}

como puede ver voy a seleccionar el elemento con el id=mycontent y le dire que el valor que contiene sera la data del response.

Para que esto funcione también debo cambiar algo de codigo en el controlador y en la vista.

a mi archivo con el nombre tochange.blade.php le hare las siguientes modificaciones:

<div id="mycontent">
@if(isset($message))
    {{$message}}
@else
 All my content goes here my friend
@endif
</div>

A continuación cambiare el metodo message en el controlador:

public function message(){
    $message = "Hola gracias por entrar a este articulo";
    return $message;
}

Con estos cambios ya debería de poder cambiar el texto al apretar el botón click me.

Ajax en laravel con javascript(Vanilla.js)

Todos lo que están leyendo este articulo asumo que saben lo que hace AJAX, lo que no puedo asumir es que sepan como funciona aunque eso lo explicare en un Articulo apartado no quiero que se vaya tanto este articulo tampoco.

Antes de declarar las funciones que necesito para mostrar este ejemplo voy a necesitar una variable para que se le sea asignado el valor de XMLHttpRequest o ActiveXObject(Caso Internet Explorer)

http_request = false;

Vamos a la función que hará casi todo:

function peticion(url) {

        http_request = false;

        if (window.XMLHttpRequest) { // Crome, Mozilla, etc.
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('fallo no fue posible crear una instancia de xmlhttp');
            return false;
        }
        http_request.onreadystatechange = contenido;
        http_request.open('GET', url, true);
        http_request.send();

    }

con esta funcion estoy haciendo la petición ahora necesito la funcion que procesara lo devuelto.

function contenido() {

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                var contentdiv = document.getElementById("mycontent");
                contentdiv.innerHTML=http_request.responseText;
            } else {
                alert('Hubo problemas con la petición.');
            }
        }

    }

Por ultimo tenemos que crear un controlador y una ruta la cual sera la url cuando llamemos a la función petición en onclick.

Creare un controlador que le llamare HomeController solo para el ejemplo.

php artisan make:controller HomeController

Al controlador que cree agréguele el siguiente método:

public function peticion(){
        $message = "Este es el ejemplo para vainilla.js";
        return $message;
}

la ruta para que vaya con el ejemplo le pondre de nombre javascriptAjax

Route::get('javascriptAjax','HomeController@peticion');

Para las vistas usare las que use anteriormente en la parte de axios pero un poco modificadas. A continuación el código:

-vista tochange.blade.php

<div id="mycontent">
@if(isset($message))
    {{$message}}
@else
 Debo cambiar esto
@endif
</div>

Nuestra vista ajaxexample.blade.php quedaría así.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Utilizando ajax con Vanilla.js</title>
<meta name="description" content="Utilizando ajax con Axios">
<meta name="author" content="Blastcoding">
<link rel="stylesheet">
</head>
<body>
<input type="button" name="" id="btnajax" class="btn btn-primary" role="button" onclick="peticion('/javascriptAjax')" value="click me">
@include("tochange")
<script src={{ asset('js/app.js')}}></script>
<script>

var http_request = false;

function peticion(url) {

    http_request = false;

    if (window.XMLHttpRequest) { // Crome, Mozilla, etc.
        http_request = new XMLHttpRequest();
        if (http_request.overrideMimeType) {
            http_request.overrideMimeType('text/xml');
        }
    } else if (window.ActiveXObject) { // IE
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }

    if (!http_request) {
        alert('fallo no fue posible crear una instancia de xmlhttp');
        return false;
    }
    http_request.onreadystatechange = contenido;
    http_request.open('GET', url, true);
    http_request.send();

}

function contenido() {

    if (http_request.readyState == 4) {
        if (http_request.status == 200) {
            alert(http_request.responseText);
        } else {
            alert('Hubo problemas con la petición.');
        }
    }

}

</script>
</body>
</html>

Como puedes ver aquí estarán las funciones de las cuales antes hemos hablado, el ejemplo ya es funcional cambia el texto que queríamos cambiar por «Este es el ejemplo para vainilla.js»

Nota: todas las formas de utilizar ajax vistas anteriormente funcionan en Vue.js, Angular, React. A continuación veremos formas diferentes que son de cada uno de estos frameworks y plataformas.

Ajax en laravel con vue

Ajax en laravel con react

Ajax en laravel con Angular 2

Ayudame: Por favor deja un comentario antes de irte, tu opinión es bienvenida. Si te gusta el contenido comparte.