Reading Time: 6 minutes

1,578 Views

Inside this article we will see the concept i.e Laravel 9 Ajax GET request example tutorial. Article contains the classified information about working with Ajax GET request in laravel 9.

While working with forms we have these request methods – POST, GET, etc. Article contains the information about GET request in Ajax request. We will consider a list of users. To show a specific user details we will fire an ajax request using GET request type.

Learn More –

Let’s get started.

Laravel Installation

Open terminal and run this command to create a laravel project.

composer create-project laravel/laravel myblog

It will create a project folder with name myblog inside your local system.

To start the development server of laravel –

php artisan serve

URL: http://127.0.0.1:8000

Assuming laravel already installed inside your system.

Create Database & Connect

To create a database, either we can create via Manual tool of PhpMyadmin or by means of a mysql command.

CREATE DATABASE laravel_app;

To connect database with application, Open .env file from application root. Search for DB_ and update your details.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_app
DB_USERNAME=root
DB_PASSWORD=root

Generate Fake Data Using Factory

As you install laravel 9 setup, you should see these files –

User.php a model file inside /app/Models folder.
UserFactory.php a factory file inside /database/factories folder.

We will use concept of factory to seed dummy data to this application. But first you need to migrate your application and create users table into your database.

$ php artisan tinker

It will open tinker shell to execute commands. Copy and paste this command and execute to create test data.

>>> User::factory()->count(20)->create()

It will generate 20 fake rows of users into table.

Create Controller

Next,

We need to create a controller file.

$ php artisan make:controller UserController

It will create a file UserController.php inside /app/Http/Controllers folder.

Open UserController.php and write this complete code into it.

<?php

namespace App\Http\Controllers;

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

class UserController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {
        $users = User::paginate(10);

        return view('users', compact('users'));
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        $user = User::find($id);

        return response()->json($user);
    }
}

Create Blade Layout File

Go to /resources/views folder and create a file with name users.blade.php

Open users.blade.php and write this complete code into it.

<!DOCTYPE html>
<html>

<head>
    <title>Laravel 9 Ajax GET Request Example Tutorial</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>

    <div class="container" style="margin-top: 10px;">

        <h3 style="text-align: center;">Laravel 9 Ajax GET Request Example Tutorial</h3>

        <table class="table table-bordered data-table" style="margin-top: 30px;">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($users as $user)
                    <tr>
                        <td>{{ $user->id }}</td>
                        <td>{{ $user->name }}</td>
                        <td>{{ $user->email }}</td>
                        <td>
                            <a href="javascript:void(0)"
                                data-url="{{ route('users.show', $user->id) }}" class="btn btn-info show-user">Show</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

    </div>

    <!-- Modal -->

    <div class="modal fade" id="userShowModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">User details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                </div>

                <div class="modal-body">
                    <p><strong>ID:</strong> <span id="user-id"></span></p>
                    <p><strong>Name:</strong> <span id="user-name"></span></p>
                    <p><strong>Email:</strong> <span id="user-email"></span></p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

</body>

<script type="text/javascript">
    $(document).ready(function() {

        /*------------------------------------------
        --------------------------------------------
        When click user on Show Button
        --------------------------------------------
        --------------------------------------------*/
        $(document).on('click', '.show-user', function() {

            var userURL = $(this).data('url');

            $.ajax({
                url: userURL,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $('#userShowModal').modal('show');
                    $('#user-id').text(data.id);
                    $('#user-name').text(data.name);
                    $('#user-email').text(data.email);
                }
            });

        });

    });

</script>

</html>

Concept

To show a single user details on modal, fired an ajax request using GET request type.

$(document).on('click', '.show-user', function() {

    var userURL = $(this).data('url');

    $.ajax({
        url: userURL,
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            $('#userShowModal').modal('show');
            $('#user-id').text(data.id);
            $('#user-name').text(data.name);
            $('#user-email').text(data.email);
        }
    });

});

Add Route

Open web.php from /routes folder and add these route into it.

//...
use App\Http\Controllers\UserController;

//...

Route::get('users', [UserController::class, 'index']);
Route::get('users/{id}', [UserController::class, 'show'])->name('users.show');

Application Testing

Run this command into project terminal to start development server,

php artisan serve

URL: http://127.0.0.1:8000/users

When you click on any Show button, you will get this user’s detail modal.

We hope this article helped you to Laravel 9 Ajax GET Request Example Tutorial in a very detailed way.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.