f4b1.com
***

Comment faire une requête Ajax avec jQuery et Laravel

By Admin on 2017-04-15 16:49:23

Nombre de vues : 20422

Vous allez maintenant entendre parler de plus en plus du maintenant célèbre Framework PHP Laravel ici, pour rappel il offre vraiment un cadre de travail pratique et clair pour développer vos applications en PHP.

Cette fois nous allons voir comment faire une faire une requête Ajax (Asynchronous Javascript and XML) via un clic sur un bouton dans une Blade de Laravel à l'aide de jQuery. Ce tutoriel met donc œuvre le clic sur un élément HTML de la page avec le lancement d'une requête Ajax et l'affichage basique du résultat dans la Blade. Il faudra créer une route et une fonction dans un contrôleur dédié qui renvoie le résultat à la Blade.

On commence avec le contenu de la Blade Laravel, avec une div et un bouton dedans, et une div qui affichera le résultat de notre requête Ajax. Il faut donner un id à nous deux div pour notre ami jQuery :

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <title>Laravel</title>
		
      <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    </head>
    <body>
      <div class="content">
       <div class='f4b1'>
        <button  type="button" class="btn btn-success">Call Ajax</button>
       </div>
       <div class='ajax'>                    
       </div>
       </div>
    </body>	
</html>

Ensuite il y a la partie Javascript avec notre événement click et le lancement de la requête Ajax :

<script>
     $(".f4b1").click(function(e){        
        $.ajaxSetup({
	  headers: {
	    'X-CSRF-TOKEN': '<?php echo csrf_token(); ?>'
          }
        });

        $.ajax({
	    url: '/ajax',
            type: 'POST',
            data: {
					
            },
                
	    dataType: 'JSON',
            success: function (data) {
					
	       $('.ajax').empty();
	       $('.ajax').append('Count Users =' + data);

            },
            error: function (e) {
                console.log(e.responseText);
            }
        });
    });
</script>

Après, il faut bien évidemment déclarer la route que l'on utilise pour faire l'appel Ajax :

Route::post('/ajax', 'AjaxController@ajax_call');

Enfin, nous allons utiliser notre controlleur AjaxController spécialement crée pour l'occasion avec la commande suivante :

php artisan make:controller AjaxController

Vous pouvez aussi utiliser un autre controller mais au moins là vous savez que tout ce qui concerne l'Ajax est dans AjaxController. On va faire une requête basique pour tester la réponse de notre appel Ajax :

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;

class AjaxController extends Controller
{
    public function ajax_call(){
		
	\Log::info("ajax_call()");
	$nb_users = \DB::table('users')->count();
	$nb_users = json_encode($nb_users);
	return $nb_users;
    }
}

Et voila, vous savez maintenant faire une requête basique en Ajax via jQuery en utilisant votre framework habituel Laravel.

Articles de la même catégorie :