Laravel 10 Ajax POST Request Example

In the previous tutorial, we have already seen how to use Ajax in the Laravel application. In this tutorial, we will dive into details and we will see that Laravel 10 Ajax post request example. I will use also the CSRF token to send a POST Ajax request to the server. We will see a complete Ajax example so that we can show the loader before getting the response back from the server.

I will simply create an HTML form and take the input from the user and we will accept that input from the user from the controller with an Ajax POST request. So if you don't know how to handle Laravel Ajax post CSRF, then this example tutorial is for you. So let's see how to post an Ajax request in Laravel 10 application.

laravel-10-ajax-post-request-data-example

Step 1: Install Laravel 10

First of all, we need to get a fresh Laravel 10 version application using the bellow command to start laravel 10 ajax post request example.

composer create-project laravel/laravel example-app

Step 2: Create Route

We need two routes to create this laravel ajax post request tutorial. One is a form showing form and another is for sending the request.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AjaxController;

Route::controller(AjaxController::class)->group(function () {
    Route::get('todo', 'index');
    Route::post('todo', 'store')->name('store');
});

Step 3: Create Controller

Now we have to create AjaxController to complete our laravel ajax post csrf example. So run the below command to create a controller:

php artisan make:controller AjaxController

Now update this controller like this:

app/Http/Controllers/AjaxController.php

<?php

namespace App\Http\Controllers;

use App\Models\Employee;
use Illuminate\Http\Request;

class AjaxController extends Controller
{
    public function index()
    {
        return view('todo.index');
    }

    public function store(Request $request)
    {
        Employee::create($request->all());

        return response(['success' => 'Employee created successfully.']);
    }
}

Step 4: Create View

In this final step, we have to create an HTML form. So create it in the following path and update it like this:

resources/view/todo/index.blade.php

@extends('layouts.app')

@section('content')
    <div class="panel panel-default">
        <div class="panel-body">
            <p style="font-size:20px; font-weight:bold;">Laravel 10 Ajax POST Request Example | Laravelia</p>
            <form class="mt-3" id="form-data">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" name="name" id="name" class="form-control">
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="text" name="email" id="email" class="form-control">
                </div>
                <div class="form-group">
                    <label for="joining_date">Joining date</label>
                    <input type="date" name="joining_date" id="joining_date" class="form-control">
                </div>
                <div class="form-group">
                    <label for="joining_salary">Joining salary</label>
                    <input type="number" name="joining_salary" id="joining_salary" class="form-control">
                </div>
                <button type="button" class="btn btn-success submit-form" style="background:green" id="create_new">Create Employee</button>
            </form>
        </div>
    </div>
@endsection

@push('js')
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
   
    $(".submit-form").click(function(e){
        e.preventDefault();
        var data = $('#form-data').serialize();
        $.ajax({
            type: 'post',
            url: "{{ route('store') }}",
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function(){
                $('#create_new').html('....Please wait');
            },
            success: function(response){
                alert(response.success);
            },
            complete: function(response){
                $('#create_new').html('Create New');
            }
        });
	});
</script>
@endpush

Now if you start your server by running php artisan serve and send an Ajax request to submit this form, you will see the it's working fine.

Read also: How To Send AJAX Request In Laravel 10 Using Jquery

Conclusion

After completing this how to send data via ajax in laravel tutorial, hope now you can create this laravel 10 ajax post request example in laravel 10 application. Hope this how to post a ajax request in laravel tutorial will help you.

Laravel 10 Ajax POST Request Example

Mahedi Hasan

Conclusion