Laravel - Ajax

Donald Green Donald Green
Jan 14, 2022 - 06:02
0 23
Laravel - Ajax

Ajax (asynchronous JavaScript and XML) is a set of web development techniques that leverage many web technologies used on the client side to create asynchronous web applications. Import the jquery library in your view file to use the jjery ajax functions that will be used to send and receive data via ajax from the server. On the server side, you can use the response() function to send a response to the client, and to send a response in JSON format, you can bind the response function with the json() function.

json() function syntax

json(string|array $data = array(), int $status = 200, array $headers = array(), int $options)

example

Step 1 − Create a view file called resources/views/message.php and copy the following code into this file.

<html> <head> <title> Ajax Example </title>
   
      
      
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" > </script>   
      
      
      <script> function getMessage () { 
            $ . ajax ({ 
               type : 'POST' , 
               url : '/getmsg' , 
               data : '_token = <?php echo csrf_token() ?>' , 
               success : function ( data ) { 
                  $ ( "#msg" ). html ( data .msg ) ; } }); } </script> </head>
           
               
            
         
      
   
   
   <body> <div id = 'msg' > This message will be replaced using Ajax.
         
         Click the button to replace the message. </div> <? php
      
         echo Form :: button ( 'Replace Message' ,[ 'onClick' => 'getMessage()' ]); ?> </body>
      
   

</html>

Step 2 − Create a controller named AjaxController by running the following command.

php artisan make:controller AjaxController --plain

Step 3 − Upon successful execution, you will get the following output −

Step 4 - Copy the following code into

File app/Http/Controllers/AjaxController.php .

app/Http/Controllers/AjaxController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;

class AjaxController extends Controller {
   public function index() {
      $msg = "This is a simple message.";
      return response()->json(array('msg'=> $msg), 200);
   }
}

Step 5 - Add the following lines to app/Http/rout.php .

app/http/routes.php

Route::get('ajax',function() {
   returnview('message');
});
Route::post('/getmsg','AjaxController@index');

Step 6 − Visit the following URL to test the Ajax functionality.

http://localhost:8000/ajax

Step 7 − You will be redirected to a page where you will see a message as shown in the following image.

Step 8 − After clicking the button, the result will look as shown in the following image