AJAX con jQuery en Laravel

En este artículo veremos como utilizar AJAX con jQuery en Laravel($.ajax) para cuando es usado método post. También sirve para put, delete, patch y options.

Antes de seguir con este tema chequea que jQuery está funcionando en tu instalación de Laravel o lee Fontend en Laravel También es conveniente que leas el post de laravel y ajax ya que esta es una sección de ese post, en él se explica que es parámetros espera laravel que sean pasados.

Teniendo instalado Laravel lo primero que debemos hacer es crear una ruta la cual será 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 al método index del AjaxController, por favor ten en cuenta tu versión de Laravel ya que declarar una ruta en laravel 8 es diferente a las versiones anteriores y dará que la ruta no fue encontrada.

versiones < Laravel 8 routes/web.php

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

a partir de Laravel 8 routes/web

use App\Http\Controllers\AjaxController;
Route::post('miJqueryAjax',[AjaxController::class,'index']);

Creando nuestro controller

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

app/Http/Controllers/AjaxController.php

<?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.

routes/web.php

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.

resources/views/master.blade.php

<!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 más simple posible.

Agregando el token a todos los header request

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

asegurate que el código es global

$.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 será un JSON {'name':"luis"}.

resources/views/master.blade.php[Evento on click]

$('#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(ajaxSetup) y agregar nuestro script para utilizar ajax(Evento on click) a nuestra vista quedaría de la siguiente manera.

resources/views/master.blade.php

<!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>

IMPORTANTE: El ejemplo dado es para comprender como usar Ajax con jQuery en Laravel aunque no explica del todo como utilizar Ajax en jQuery. Probablemente haga un post sobre esto en el futuro.

En caso de no estar devolviendo el tipo de dato que jQuery espera por defecto, deberás especificar él dataType, a continuación dejo los datatype que jQuery admite:

dataType

default: Intelligent Guess (xml, json, script, or html) trata de interpretar que tipo de datos le es devuelto
xml
html
script
json
jsonp
text
text xml – espera texto que será interpretado como xml
json text xml
json xml