Blog de programación, errores, soluciones

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.

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

routes/web.php
Route::post('miJqueryAjax','AjaxController@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.

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>
Somethig wrong? If you found an error or mistake on the content you can contact me on twitter | @luisg2249_luis.
Last 4 post in same category