Laravel 8 Ajax Post Request Example

By Hardik Savani November 5, 2023 Category : Laravel

This article will provide some of the most important example laravel 8 ajax request example. this example will help you laravel 8 jquery ajax post request example. you will learn laravel 8 ajax form submit example. This article will give you simple example of jquery ajax request in laravel 8.

Ajax request is a basic requirement of any php project, we are always looking for without page refresh data should store in database and it's possible only by jquery ajax request. same thing if you need to write ajax form submit in laravel 8 then i will help you how you can pass data with ajax request and get on controller.

You have to just do three things to understand how to use ajax request in laravel 8, so just follow this three step and you will learn how to use ajax request in your laravel 8 application.

Step 1: Create Routes

First thing is we put two routes in one for displaying view and another for post ajax. So simple add both routes in your route file.

routes/web.php

<?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

Same things as above for routes, here we will add two new method for routes. One will handle view layout and another for post ajax request method, so let's add bellow:

app/Http/Controllers/AjaxController.php

<?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.']);
    }
}

Read Also: Laravel 8 CRUD Application Tutorial for Beginners

Step 3: Create Blade File

Finally we require to create ajaxRequest.blade.php file and here we will write code of jquery ajax and pass laravel token. So blade file is very important in ajax request. So let's see bellow file:

resources/views/ajaxRequest.blade.php

<!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>

now you can run your example and see.

You will get output like as bellow:

Output in Log File

Read Also: Laravel 8 Import Export Excel and CSV File Tutorial
[2020-09-23 03:51:10] local.INFO: array (
  'name' => 'Hardik Savani',
  'password' => '123456',
  'email' => 'savanihd@gmail.com',
)

I hope it can help you

Tags :
Previous

Laravel 8 Import Export Excel and CSV File Tutorial
Next

Laravel 8 Yajra Datatables Example Tutorial

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares