Laravel 8 Fetch Data using Ajax Tutorial Example

In this tutorial you will learn about the Laravel 8 Fetch Data using Ajax Tutorial Example and its application with practical example.

In this Laravel 8 Fetch Data using Ajax Tutorial Example tutorial I will show you how to fetch data from database using ajax in laravel 8 applications. In this tutorial you will learn to use ajax in laravel 8. In this article I will demonstrate you how to fetch records from database using ajax in laravel. Using ajax you can fetch data from database without reloading page in laravel 8. In this step by step guide you will understand laravel ajax request implementation.

Table Of Contents−

Laravel 8 Fetch Data using Ajax Tutorial Example

In this step by step tutorial I will demonstrate you with example how to fetch data using ajax in laravel 8 application. Please follow instruction given below:

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 8 – Test This App

Step 1 – Install Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2 – Connecting App to Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

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

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

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

Step 4 – Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\AjaxController;

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

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

Now, lets create a controller named AjaxController using command given below –

php artisan make:controller AjaxController

1	php artisan make:controller AjaxController

Now, open this controller file 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);
    }
 
}

<?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 we will create a blade view file named list.blade.php file. So, go to the resources/views directory and create list.blade.php file. Then put 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>

<!DOCTYPE html>

<html>

<head>

<title>laravel 8 Get Data From Database using Ajax</title>

<style>

.container{

padding: 0.5%;

}

</style>

</head>

<body>

<h2 style="margin-top: 12px;" class="alert alert-success">laravel 8 Get Data From Database Using Ajax</h2><br>

<thead>

<tr>

<th>Email</th>

<td colspan="2">Action</td>

</tr>

</thead>

@foreach($users as $u_info)

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

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

</div>

</div>

<label class="col-sm-2 control-label">Email</label>

</div>

</form>

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

$(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

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://127.0.0.1:8000/list

1	http://127.0.0.1:8000/list

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Fetch Data using Ajax Tutorial Example