Laravel

Afin de voir comment configurer Ajax, nous allons modifier la suppression des articles du blogue pour qu'elle soit en Ajax

On utilise un middleware qui va permettre de vérifier si la requête qui a été envoyé est en Ajax.

Les middleware se trouve dans le dossier app/Http/Middleware

namespace App\Http\Middleware;

use Closure;

class Ajax
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request $request
     * @param  \Closure $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
                
        if ($request->ajax()) {
            return $next($request);
        }

        abort(404);
    }
}

Ici on vérifie si la requête est en Ajax. Si oui, on autorise la requête à continuer sa route ($next($request)), sinon on interrompt avec une erreur 404.

on ajoute le nouveau middleware dans Kernel.php afin que Laravel puisse le charger.

protected $routeMiddleware = [
    ...
    'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
    'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
    'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
    'ajax' => \App\Http\Middleware\Ajax::class,
];

On ajoute le middleware Ajax pour la méthode destroy(). C'est à dire que cette méthode devra obligatoirement être appelée en Ajax.

public function __construct(){
    $this->middleware('auth', ['except' => ['index','show']]);
    $this->middleware('ajax')->only('destroy');
}

On modifie la méthode destroy() afin qu'elle renvoi du JSON avec un code 200 si tout c'est bien passé, ou un code 404 si l'élément n'a pas pu être supprimé.

public function destroy(Post $post)
{
    if ($post->delete()){
        return response()->json([
            'id' => $post->id
        ], 200);
    } else {
        return response()->json(['message' => 'Not Found!'], 404);
    }
}

• Ligne 4-6 ⇒ Si la suppression a bien été effectuée, retourne une réponse JSON avec un code 200 et l'id de l'article qui a été supprimé
• Ligne 8 ⇒ Si la suppression n'a pas été effectuée, retourne un code 404

  Ajustement de la vue qui affiche le bouton "Supprimer"

Afin de pouvoir détecter que l'utilisateur a cliqué sur le bouton supprimé, on ajoute une Class form-delete au formulaire.

public function destroy(Post $post)
@auth
<form action="{{ url('posts/'.$post->id) }}" method="POST" class="form-delete">
    {{ csrf_field() }}
    {{ method_field('DELETE') }}
...

Dans le dossier /resources/js/, créez un nouveau fichier script.js afin de mettre notre code à l’intérieur.

/resources/js/script.js

Il faut maintenant “dire” à Laravel de charger notre nouveau fichier JavaScript. Ouvrir le fichier /resources/js/app.js et ajoutez la ligne require('./script');

require('./bootstrap');
require('./script');

On va entourer chaque article d'une div avec un id afin pouvoir supprimer les articles de la page plus facilement.

...
@foreach ($posts as $post)
    <div id="post-{{ $post->id }}">
        <h2>
            <a href="{{ url("/posts/{$post->id}") }}">{{ $post->title }}</a>
        </h2>
        <p>{{ $post->content }}</p>
        @foreach ($post->categories as $category)
            <li>{{ $category->name }}</li>
        @endforeach

    @include('inc.delete-button')
    @include('inc.edit-button')
    </div>
@endforeach
...

Dans le fichier script.js

$(() => {
    $.ajaxSetup({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
    })


    $('.form-delete').submit((e) => {
        e.preventDefault();
        let href = $(e.currentTarget).attr('action')
        if (confirm('Vraiment supprimer ?')){
            $.ajax({
                url: href,
                type: 'DELETE'
            })
            .done((data) => {
                document.getElementById("post-" + data.id).remove()
            })
            .fail(() => {
                alert("L'article n'a pas pu être supprimé")
            })
        }

    })
})

• Ligne 1 ⇒ Permet d'attendre que la page soit complètement chargée puis de démarrer les scripts. Écriture équivalent à $(function(){
• Ligne 2-4 ⇒ Configuration du header envoyé en Ajax afin d'ajouter le csrf-token pour la protection Cross-site request forgery
• Ligne 7 ⇒ Le bouton “Supprimer” étant dans un formulaire, on ajoute un événement sur l'action d'envoi du formulaire
• Ligne 8 ⇒ On bloque l'envoi normal du formulaire
• Ligne 9 ⇒ On met l'url du formulaire dans href
• Ligne 10 ⇒ Fait apparaître une demande de confirmation
• Ligne 11-20 ⇒ Envoi des données en Ajax et récupère la réponse dans data
• Ligne 16 ⇒ Supprime l'article de la vue