How to Send AJAX Request in Laravel 10 Using Jquery

Ajax is a very important topic for every front-end developer. AJAX helps us to awesome and robust applications and gives a very user-friendly response. When we use AJAX request, we can perform an action and get a response from the server without page refresh. This is a key part of using an AJAX request in a web application.

In this tutorial, I am going to show you a complete tutorial of how to send Ajax request in laravel using jquery. I will use a fresh Laravel 10 application to show you how to send ajax request in laravel controller. I will create a simple HTML form and I will send a ajax post request with csrf token and accept that request from the controller and we will return that response. 

If you are new to Laravel and want to use or perform ajax request with Laravel, then this laravel 10 ajax tutorial is for you. I am assuring you that, this how to use AJAX request in laravel tutorial will definitely help you. Let's start the tutorial on how to use AJAX request in Laravel 10.

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 ajax request example jquery.

composer create-project laravel/laravel example-app

 

Step 2: Create Route

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

routes/api.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 10 ajax 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 Illuminate\Http\Request;

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

    public function store(Request $request)
    {
        return $request->all();
    }
}

 

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;">How to Create AJAX Request | 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>
                <input type="button" class="btn btn-danger submit-form" value="Create Employee" style="background:red">
            </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(){
                //before sending the request
            },
            success: function(response){
                //the request is success
            },
            complete: function(response){
                //the request is completed
            }
        });
	});
</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 following output:

 

Read also: Ajax Search Column Filter With Pagination In Laravel

 

Conclusion

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