Laravel 10/9 Ajax Get Request Example

Laravel 10/9 ajax get request example; Through this tutorial, you will learn how to use ajax get request for getting data from the database in laravel 10, 9 app.

Through this tutorial, we will create an example that will have a list and the list will have a Get Data button. When you click that button. Then there will be a call Get Ajax request. Which takes the data from the database and displays it in A popup modal.

Laravel 10, 9 Ajax Get Request Example

Follow the following steps for how to create and use ajax get request in laravel apps:

  • Step 1 – Install Laravel App
  • Step 2 – Connecting App to Database
  • Step 3 – Execute Database Migration Command
  • Step 4 – Add Routes
  • Step 5 – Create Controller Using Artisan Command
  • Step 6 – Create Blade Views
  • Step 7 – Start Development Server
  • Step 8 – Test This App

Step 1 – Install Laravel App

In this step, Execute the following command to install laravel app, so open terminal and execute the following command:

composer create-project --prefer-dist laravel/laravel blog

Step 2 – Connecting App to Database

Then, Visit laravel app root directory, find .env file. After that, add database credential:

DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

Step 3 – Execute Database Migration Command

In this step, execute the following command to create tables into database:

php artisan migrate

Step 4 – Add Routes

In this step, open web.php file and add the following routes into it, which is placed inside routes directory:

use App\Http\Controllers\AjaxController;

Route::get('list', [AjaxController::class, 'index']);
Route::get('show-user', [AjaxController::class, 'show']);

Step 5 – Create Controller Using Artisan Command

In this step, execute the following command to create ajax controller:

php artisan make:controller AjaxController

After that, open this controller in any text editor and add the following code into it, which is located inside app/http/controllers directory:

namespace App\Http\Controllers;
use Illuminate\Http\Request;

use Redirect,Response;

use App\Models\User;
class AjaxController extends Controller
     * Display a listing of the resource.
     * @return \Illuminate\Http\Response
    public function index()
        $data['users'] = User::orderBy('id','desc')->paginate(8);
        return view('list',$data);
    public function show($id)
        $where = array('id' => $id);
        $user  = User::where($where)->first();

        return Response::json($user);


Step 6 – Create Blade Views

In this step, create one blade view file named list.blade.php file. So, visit the resources/views directory and create list.blade.php file.

Then add the following code into the list.blade.php file:

<!DOCTYPE html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>laravel 10/9 Get Data From Database using Ajax -</title>
  <link rel="stylesheet" href="" />
<script src=""></script>
<script src=""></script>
  <script src=""></script>
  <script src=""></script>

    padding: 0.5%;

<div class="container">
    <h2 style="margin-top: 12px;" class="alert alert-success">laravel Ajax Get Data From Database</h2><br>
    <div class="row">
        <div class="col-12">
          <table class="table table-bordered" id="">
                 <td colspan="2">Action</td>
           <tbody id="users-crud">
              @foreach($users as $u_info)
              <tr id="user_id_{{ $u_info->id }}">
                 <td>{{ $u_info->id  }}</td>
                 <td>{{ $u_info->name }}</td>
                 <td>{{ $u_info->email }}</td>
                 <td><a href="javascript:void(0)" id="show-user" data-id="{{ $u_info->id }}" class="btn btn-info">Show</a></td>
          {{ $users->links() }}


After that, create one modal for display data on it using ajax. So add the following code into list.blade.php file:

<div class="modal fade" id="ajax-modal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title" id="userShowModal"></h4>
        <div class="modal-body">
            <form id="userForm" name="userForm" class="form-horizontal">
               <input type="hidden" name="user_id" id="user_id">
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">Name</label>
                    <div class="col-sm-12">
                        <input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" value="" maxlength="50" required="">

                <div class="form-group">
                    <label class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-12">
                        <input type="email" class="form-control" id="email" name="email" placeholder="Enter Email" value="" required="">

Now, add the following javascript code into list.blade.php file for display data on modals using ajax in laravel app:

  $(document).ready(function () {
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

   /* When click show user */
    $('body').on('click', '#show-user', function () {
      var user_id = $(this).data('id');
      $.get('ajax-crud/' + user_id +'/edit', function (data) {
         $('#userShowModal').html("User Details");

Step 7 – Run Development Server

In this step, execute the php artisan serve command on terminal to start development server:

 php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080

Step 8 – Test This app

Now, open browser and hit the following url on it:


Laravel 10/9 fetch data using ajax tutorial, you have learned how to retrieve data from database using ajax in laravel 10/9 app.

Recommended Laravel Tutorials

If you have any questions or thoughts to share, use the comment form below to reach us.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Jassweb, Rai Chak, Punjab, India. 143518