In this tutorial you will learn about the Laravel 8 Ajax Post Request Example and its application with practical example.
In this Laravel 8 Ajax Post Request Example tutorial I will show you how to submit form data using ajax post method in laravel 8 application. In this tutorial you will learn to submit form data without reloading or refreshing of page using ajax. In this article we will be creating example using jquery ajax submit handler for ajax form submission. In Laravel, to submit form data using ajax we must have to incorporate csrf token with form data and set X-CSRF-TOKEN request header with ajax form submit request.
Laravel 8 Ajax Post Request Example
In this step by step tutorial I will demonstrate you with example on how to submit a form without reloading or refreshing of page using ajax. Please follow the instruction given below:
Step 1: Create Routes
First of all we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\AjaxController; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('ajaxRequest', [AjaxController::class, 'ajaxRequest']); Route::post('ajaxRequest', [AjaxController::class, 'ajaxRequestPost'])->name('ajaxRequest.post'); |
Step 2: Create Controller
Now, lets create a controller named AjaxController using command given below –
|
1 |
php artisan make:controller <span class="heads">AjaxController</span> |
Once the above command executed, it will create a controller file AjaxController.php in app/Http/Controllers/ directory. Open the AjaxController.php file and put the following code in it.
app/Http/Controllers/AjaxController.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 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Log; class AjaxController extends Controller { /** * Create a new controller instance. * * @return void */ public function ajaxRequest() { return view('ajaxRequest'); } /** * Create a new controller instance. * * @return void */ public function ajaxRequestPost(Request $request) { $input = $request->all(); Log::info($input); return response()->json(['success'=>'Got Simple Ajax Request.']); } } |
Step 3: Create Blade File
In this step, we will create view/blade file. Lets create a blade file “ajaxRequest.blade.php” in “resources/views/” directory and put the following code in it respectively.
resources/views/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 |
<!DOCTYPE html> <html> <head> <title>Laravel 8 Ajax Request example</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 href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <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"> <h1>Laravel 8 Ajax Request example</h1> <form > <div class="form-group"> <label>Name:</label> <input type="text" name="name" class="form-control" placeholder="Name" required=""> </div> <div class="form-group"> <label>Password:</label> <input type="password" name="password" class="form-control" placeholder="Password" required=""> </div> <div class="form-group"> <strong>Email:</strong> <input type="email" name="email" class="form-control" placeholder="Email" required=""> </div> <div class="form-group"> <button class="btn btn-success btn-submit">Submit</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(); $.ajax({ type:'POST', url:"{{ route('ajaxRequest.post') }}", data:{name:name, password:password, email:email}, success:function(data){ alert(data.success); } }); }); </script> </html> |
Run Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
|
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
|
1 |
http://localhost:8000/ajaxRequest |
