web-dev-qa-db-fra.com

Exemple de travail minimum pour ajax POST in Laravel 5.3

Quelqu'un peut-il s’il vous plaît expliquer la méthode de publication ajax dans Laravel 5.3 avec un exemple minimum pleinement exploitable? Je sais qu’il existe certaines ressources sur le Web, mais je manque un exemple concis et simple.

ajaxlaravelpost
23
jonathan.scholbach

Je suppose que vous avez une compréhension de base du paradigme modèle-contrôleur-vue, une compréhension de base de Laravel) et une compréhension de base de JavaScript et de JQuery (que je vais utiliser pour des raisons de simplicité).

Nous allons créer un champ d'édition et un bouton qui sera envoyé au serveur. (Cela fonctionne pour toutes les versions de Laravel 5.0 à 5.6)

1. Les routes

Au début, vous devez ajouter des routes à votre routes/web.php. Créez un itinéraire pour la vue, comme vous le savez dans les vues ordinaires:

Route::get('ajax', function(){ return view('ajax'); });

Le deuxième itinéraire que vous devez créer est celui qui gère la demande de publication ajax. Notez qu’il utilise la méthode post :

Route::post('/postajax','AjaxController@post');

2. La fonction du contrôleur

Dans la (deuxième) route que vous avez créée tout à l'heure, la fonction de contrôleur post dans le AjaxController est appelée. Alors créez le contrôleur

php artisan make:controller AjaxController

et dans le app/Http/Controllers/AjaxController.php ajoutez la fonction post contenant les lignes suivantes:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;


class AjaxController extends Controller {

   public function post(Request $request){
      $response = array(
          'status' => 'success',
          'msg' => $request->message,
      );
      return response()->json($response); 
   }
}

La fonction est prête à recevoir des données via une requête Http et renvoie une réponse au format JSON (composée du statut "succès" et du message que la fonction a reçu de la requête).

3. La vue

Dans la première étape, nous avons défini la route pointant vers la vue ajax, créez maintenant la vue ajax.blade.php.

<!DOCTYPE html>
<html>
<head>

    <!-- load jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <!-- provide the csrf token -->
    <meta name="csrf-token" content="{{ csrf_token() }}" />

    <script>
        $(document).ready(function(){
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            $(".postbutton").click(function(){
                $.ajax({
                    /* the route pointing to the post function */
                    url: '/postajax',
                    type: 'POST',
                    /* send the csrf-token and the input to the controller */
                    data: {_token: CSRF_TOKEN, message:$(".getinfo").val()},
                    dataType: 'JSON',
                    /* remind that 'data' is the response of the AjaxController */
                    success: function (data) { 
                        $(".writeinfo").append(data.msg); 
                    }
                }); 
            });
       });    
    </script>

</head>

<body>
    <input class="getinfo"></input>
    <button class="postbutton">Post via ajax!</button>
    <div class="writeinfo"></div>   
</body>

</html>

Si vous vous demandez quel est le problème avec ce jeton csrf, lisez https://laravel.com/docs/5.3/csrf

62
jonathan.scholbach