Laravel 8 fetches data using ajax. In this tutorial, we will show you how to retrieve data from a database using ajax in the laravel 8 application.


When you are creating an application in Laravel 8 application. Then you need to display some data on the page or modals without refreshing the page. At that time you can display the data using Jquery and Ajax in the laravel 8 application. That too without refreshing the whole page.

So this tutorial will guide you on how to get data using ajax in the laravel 8 application. And also how to display it.



Use the following steps to retrieve data from the database table:


  • Step 1 – Install Laravel 8 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 1 – Install Laravel 8 App

In this step, Execute the following command to install laravel 8 app


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



Step 2 – Connecting App to Database

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


DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=db_name
DB_USERNAME=db_username
DB_PASSWORD=db_password



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:


<?php
use App\Http\Controllers\AjaxController;

Route::get('list', [AjaxController::class, 'list']);
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 8 Get Data From Database using Ajax</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 8 Get Data From Database Using Ajax</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 8 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 – Start Development Server

run the artisan command to run or development server


php artisan serve


Thanks its will help you......