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_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
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:

<?php
  
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>
<html>
<head>
  <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 - Tutsmake.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

 <style>
   .container{
    padding: 0.5%;
   } 
</style>
</head>
<body>

<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="">
           <thead>
              <tr>
                 <th>Id</th>
                 <th>Name</th>
                 <th>Email</th>
                 <td colspan="2">Action</td>
              </tr>
           </thead>
           <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>
              </tr>
              @endforeach
           </tbody>
          </table>
          {{ $users->links() }}
       </div> 
    </div>
</div>

</body>
</html>

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>
        <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>
                </div>

                <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="">
                    </div>
                </div>
            </form>
        </div>
    </div>
  </div>
</div>

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

<script>
  $(document).ready(function () {
    $.ajaxSetup({
        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");
          $('#ajax-modal').modal('show');
          $('#user_id').val(data.id);
          $('#name').val(data.name);
          $('#email').val(data.email);
      })
   });
  
  });
  
 
</script>

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:

http://127.0.0.1:8000/list

Conclusion

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