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', '[email protected]');
Route::post('ajax', '[email protected]');

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 :)


JQuery: Script Multilingua, the easy way

Vi presento un Work-around molto semplice per eseguire i nostri Script a seconda della lingua visualizzata sulla pagina web. Se il nostro script deve fare cose diverse (o non fare nulla) a seconda della lingua che stiamo visualizzando sul browser, quello che possiamo fare è guardare quale è l’attributo LANG contenuto all’interno del tag html e utilizzarlo come selettore di JQuery, mi spiego meglio:

Come funziona questo Snippet?

Per funzionare correttamente lo snippet deve essere incluso in un tag SCRIPT e la sua dichiarazione deve essere successiva a quella della libreria JQuery
Innanzi tutto lo script viene incluso in document.ready() in modo che tutti gli elementi del DOM siano correttamente disegnati.
Nello snippet che segue abbiamo assunto di voler inserire un testo tradotto per l’elemento EL quindi abbiamo sfruttato il selettore di JQuery TAG[ATTRIBUTE] in questo modo:

LO SNIPPET

Di seguito lo snippet, pronto per il copia-incolla 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
/**
* Developer Corsaro.it - JQuery Translate String
* Website: https://developercorsaro.it
* [email protected]
*/


       jQuery('document').ready(function ($) {

           /*Assumendo ad esempio <html lang="en-US"> */
          $('html[lang="en-US"] #EL').text("eng TRANSLATED");

        });
    </script>

Utilizzi

Non è il modo migliore di farlo, ma è uno dei più furbi, con questo script possiamo andare ad esempio a tradurre alcuni elementi della pagina (ad esempio pulsanti, titoli, etc)

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


JQuery: azioni con i Cookie

Pensate per un attimo a questo scenario: volete creare un pop-up di iscrizione alla newsletter da mettere in home page del vostro sito web: mostrarlo ad ogni refresh diventa davvero troppo invaso e fastidioso per i nostri utenti, tant’è che il più probabile risultato è che nessuno si iscriverà alla nostra lista, o che se ne andrà infastidito verso qualche altro sito web. La cosa migliore da fare questi casi è mostrare il pop-up solo una volta per sessione, e per fare questo ci viene in aiuto la librearia di JQuery: JQuery Cookie. Questa libreria ci fornisce tutte le funzionalità necessarie per creare un cookie in Javascript e di manipolarlo.

Come funziona questo Snippet?

Per funzionare correttamente lo snippet deve essere incluso in un tag SCRIPT e la sua dichiarazione deve essere successiva a quella della libreria JQuery (in questo caso abbiamo linkato in prima riga JQuery Cookie da remoto, ma potete facilmente includerlo nel progetto).
Innanzi tutto lo script viene incluso in document.ready() in modo che tutti gli elementi del DOM siano correttamente disegnati.

Viene effettuato un controllo su ‘cookie-name’ per vedere se il nostro cookie è già stato creato in precedenza, ciò vorrebbe dire che abbiamo già eseguito questa azione e che quindi non deve essere ripetuta. Se NON esiste il cookie allora vado libero con la mia esecuzione (in questo esempio mostriamo una modale Bootstrap ma potete inserire una qualsiasi funzione). Finita l’esecuzione dei comandi viene creato il cookie e gli viene settata anche una durata (7 giorni in questo caso), in questo modo al prossimo refresh non sarà di nuovo eseguita nessuna istruzione finchè questo resta valido.

LO SNIPPET

Di seguito lo snippet, pronto per il copia-incolla 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
/**
* Developer Corsaro.it - JQuery Cookie Check
* Website: https://developercorsaro.it
* [email protected]
*/


              jQuery('document').ready(function ($) {

            if ($.cookie('cookie-name') == null) {
                setTimeout(function() {
                $('#modal-shop').modal('show');
                // doStuff
                }, 10000);
                $.cookie('cookie-name', '7');
            }
        });
    </script>

Utilizzi

Script estremamente versatile, può essere incluso in qualsiasi punto del DOM, per effettuare i test basterà eliminare i cookie dal browser svuotando la cronologia.

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


Uno Smooth Scroll in JQuery

Oggi vi lascio uno snippet per implementare uno smooth scroll verticale sulle vostre pagine web. L’idea di base è far scorrere la pagina fino ad un determinato punto una volta cliccato su un pulsante, utile ad esempio se abbiamo una copertina che occupa il 100% dello schermo e vogliamo far scorrere la pagina all’utente semplicemente cliccando su una freccia o un link qualsiasi.

Come funziona questo Snippet?

Per funzionare correttamente lo snippet deve essere incluso in un tag <script></script> e la sua dichiarazione deve essere successiva a quella della libreria JQuery.
Innanzi tutto lo script viene incluso in document.ready() in modo che tutti gli elementi del DOM siano correttamente disegnati.

Andiamo a triggerare l’evento click sull’anchor che vogliamo utilizzare $(‘anchor‘).click(). All’interno dell’evento click appena scritto inseriamo la funzione di callback che eseguirà l’animazione vera e propria ( mediante animate() di JQuery ).  Nello snippet poi abbiamo indicato un ipotetico elemento con id #target-anchor per indicare alla funzione fin dove far scorrere la pagina  ($(“#target-anchor”).offset().top).  Infine, il valore 800 rappresenta la durata dell’animazione ( in millisecondi), per cui sentitevi liberi di impostare quella che più si adatta alle vostre esigenze

LO SNIPPET

Di seguito lo snippet, pronto per il copia-incolla 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* Developer Corsaro.it - JQuery Smooth Scroll
* Website: https://developercorsaro.it
* [email protected]
*/


$(document).ready(function() {
$('anchor').click(function(event){
$('html, body').animate({
scrollTop: $("#target-anchor").offset().top
}, 800);
event.preventDefault();
});
});

Utilizzi

Come ho detto in precedenza questo Snippet può essere utlizzato in un sacco di tipologie diverse di progetto, ad esempio possiamo includerlo nel footer del tema WordPress attivo.
Domande?  🙂

 

 

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