Gestire richieste ajax in Laravel

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.

 

Lo hai trovato utile? Codividilo con i tuoi follower :)