Oggi vediamo come fare ad inviare delle richieste ajax nel framework Laravel. Essendo un argomento molto specifico darò per scontato alcune cose che già sai, come ad esempio il funzionamento di Laravel stesso ed, in generale del pattern MVC, oltre alla struttura di una generica richiesta Ajax.
Prerequisiti
- Conoscenze del Framework Laravel e del pattern MVC
- Sintassi JQuery
- Richieste Ajax
La creazione delle Routes
Iniziamo dal definire le routes che ci serviranno per modellare la richiesta. Fondamentalmente abbiamo bisogno di 2 routes, una in GET mostrerà la view da cui effettuare la richiesta (e su cui stampare i risultati) ed una POST che invierà la richiesta. Le Routes sono le seguenti:
1 2 | Route::get('ajax', 'HomeController@ajaxRequest'); Route::post('ajax', 'HomeController@ajaxResponse'); |
Il controller
A questo punto il nostro HomeController sarà costuito, tra le altre, da una funzione ajaxRequest() che mostra la view da cui effettuare la richiesta Ajax (come ad esempio una form di registrazione), e da una funzione ajaxResponse() che processa la richiesta e ritorna il risultato della stessa. Il nostro Homecontroller.php sarà così definito:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | namespace App\Http\Controllers; use Illuminate\Http\Request; class HomeController extends Controller { // .... public function ajaxRequest() { return view('ajaxRequest'); } public function ajaxRequestPost(Request $request) { $response = array( 'status' => 'success', 'msg' => $request->message, ); return response()->json($response); } } |
La view
Ultimo step, andiamo a creare la view che si interfaccia con l’utente, ajaxRequest.blade.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | <!DOCTYPE html> <html> <head> <title>Laravel Ajax Request</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <meta name="csrf-token" content="{{ csrf_token() }}" /> </head> <body> <div class="container"> <p> Bla Bla Bla.... </p> <form action="" method="post"> <div class="form-group"> <label for="name">Name:</label> <input type="text" name="name" id="name" class="form-control" placeholder="Nome" required=""> </div> <div class="form-group"> <label for="password">Password:</label> <input type="password" name="password" id="password" class="form-control" placeholder="Password" required=""> </div> <div class="form-group"> <label for="email" >Email:</label> <input type="email" name="email" id="email" class="form-control" placeholder="Email" required=""> </div> <div class="form-group"> <button class="btn btn-success btn-submit">Invia</button> </div> </form> </div> </body> <script type="text/javascript"> $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $(".btn-submit").click(function(e){ e.preventDefault(); var name = $("input[name=name]").val(); var password = $("input[name=password]").val(); var email = $("input[name=email]").val(); var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content'); $.ajax({ type:'POST', url:'/ajaxRequest', data:{ _token: CSRF_TOKEN, , name:name, password:password, email:email}, success:function(data){ console.log(data.success); } }); }); </script> </html> |
Ricordiamoci di caricare la libreria JQuery necessaria ad effettuare la richiesta ed il token di controllo CSRF_TOKENper l’invio dei dati tramite la form, in caso di successo la console.log() ci avvertirà con il messaggio definito all’interno del controller.