Laravel 8 Ajax Get Data From Database Example

Laravel 8 ajax get/fetch data from database. In this post, i will show from scratch on how to get or retrieve data from database using ajax in laravel.

If you want to fetch/get data from database using jQuery ajax without reload the whole web page. And want to display on html page.

So, in this example post, i will use jQuery ajax to fetch data from database and display in blade view (html page). As well as how to use ajax request(GET/POST) in laravel to retrieve data from database

How to Retrieve Data From Database using Ajax in Laravel

  • Step 1 – Install Laravel 8 Application
  • Step 2 – Configuring Database using Env File
  • Step 3 – Generate Dummy Record Into Database
  • Step 4 – Create Routes
  • Step 5 – Creating Ajax Get Data Controller
  • Step 6 – Create Blade File to Display Data
  • Step 7 – Start Development Server
  • Step 8 – Run Laravel 8 Ajax Get Data From Database App On Browser

Step 1 – Install Laravel 8 Application

In step 1, open your terminal and navigate to your local web server directory using the following command:

//for windows user
cd xampp/htdocs

//for ubuntu user
cd var/www/html

Then install laravel 8 latest application using the following command:

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

Step 2 – Configuring Database using Env File

In step 2, open your downloaded laravel 8 app into any text editor. Then find .env file and configure database detail like following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Step 3 – Generate Dummy Record Into Database

In step 3, Generate dummy records into database table users. So, navigate database/seeders/ directory and open DatabaseSeeder.php file. Then add the following two line of code it:

use App\Models\User;

User::factory(100)->create();

After that, open command prompt and navigate to your project by using the following command:

cd / LaravelAjaxGet

Now, open again your terminal and type the following command on cmd to create tables into your selected database:

php artisan migrate

Next, run the following database seeder command to generate dummy data into database:

php artisan db:seed

Step 4 – Create Routes

In step 4, open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AjaxGetDataController;


/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('ajax-get-data-form', [AjaxGetDataController::class, 'index']);
Route::post('get-data-from-db', [AjaxGetDataController::class, 'retrieve']);

Step 5 – Creating Controller

In step 5, create form controller by using the following command:

php artisan make:controller AjaxGetDataController

The above command will create AjaxGetDataController.php file, which is located inside LaraveljQuery/app/Http/Controllers/ directory.

So open AjaxGetDataController.php file and add the following code into it:

<?php

namespace App\Http\Controllers;

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

class AjaxGetDataController extends Controller
{
    public function index()
    {
        return view('ajax-get-data-form');
    }

    public function retrieve(Request $request)
    {  
    	
    	$term = $request->str;

    	$data = [];

        if(!empty($term)){

          $data = User::where('name', 'LIKE', "%{$term}%") 
                    ->orWhere('email', 'LIKE', "%{$term}%") 
                    ->first();
        }

        $res = true;            

        if(!$data){
            
        	$data['msg'] = 'No Record Found';
        	$res = false;
        }
        return response()->json(['success' => $res, 'data' => $data]);

    }
}

Step 6 – Create Blade File For Contact Form

In step 6, create new blade view file that named ajax-get-data-form.blade.php inside resources/views directory for ajax get data from database.

And the following jQuery and ajax code will get and display data from database in laravel:

<script>
  $(document).ready(function($){

      $.ajaxSetup({
          headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });

      $('body').on('click', '#search', function () {

        var str = $("#query").val();
        $("#search").html('Please Wait...');

         
        // ajax
        $.ajax({
            type:"POST",
            url: "{{url('get-data-from-db')}}",
            data: { str: str },
            dataType: 'json',
            success: function(res){
              if(res.success == true){
                  $(".jumbotron").removeClass("d-none");
                  $("#msg").addClass("d-none");
                  $('#id').html(res.data.id);
                  $('#name').html(res.data.name);
                  $('#email').html(res.data.email);
              }else{
                $('#msg').html(res.data.msg);
                $(".jumbotron").addClass("d-none");
                $("#msg").removeClass("d-none");
              }
             $("#search").html('Search By Ajax');
           }
        });

      });

  });
</script>

Don’t worry i have already added the jQuery ajax code to get data from database in laravel on blade views.

So, you can add the following php and html form code into ajax-get-data-form.blade.php:

<!DOCTYPE html>
<html>
<head>
	<title>How to Retrieve Data From Database using Ajax in Laravel 8</title>
	<meta name="csrf-token" content="{{ csrf_token() }}">

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

</head>
<body>

<div class="container mt-4">

  <div class="card">
    <div class="card-header text-center font-weight-bold">
      <h2>Laravel 8 Ajax Get Data From Database</h2>
    </div>
    <div class="card-body">

       <div class="form-group">
          <label for="exampleInputEmail1">Search Term</label>
          <input type="text" name="query" id="query" class="form-control" placeholder="Search by email and name">
       </div>

      <button type="submit" class="btn btn-primary" id="search">Search By Ajax</button> <br>

      <div class="jumbotron d-none mt-2">
        <span>Id :- </span><b id="id"></b><br>
        <span>Name :- </span><b id="name"></b><br>
        <span>Email :- </span><b id="email"></b><br>
      </div>
      <span id="msg"></span>

    </div>
  </div>
</div>	

<script>
  $(document).ready(function($){

      $.ajaxSetup({
          headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });

      $('body').on('click', '#search', function () {

        var str = $("#query").val();
        $("#search").html('Please Wait...');

         
        // ajax
        $.ajax({
            type:"POST",
            url: "{{url('get-data-from-db')}}",
            data: { str: str },
            dataType: 'json',
            success: function(res){
              if(res.success == true){
                  $(".jumbotron").removeClass("d-none");
                  $("#msg").addClass("d-none");
                  $('#id').html(res.data.id);
                  $('#name').html(res.data.name);
                  $('#email').html(res.data.email);
              }else{
                $('#msg').html(res.data.msg);
                $(".jumbotron").addClass("d-none");
                $("#msg").removeClass("d-none");
              }
             $("#search").html('Search By Ajax');
           }
        });

      });

  });
</script>

</body>
</html>

Step 7 – Start Development Server

Finally, open your command prompt again and run the following command to start development server for how to retrieve data from database using ajax in laravel application:

php artisan serve

Step 8 – Run Laravel 8 Ajax Get Data From Database App On Browser

In step 8, open your browser and fire the following url into your browser:

http://127.0.0.1:8000/ajax-get-data-form

When you fire the above given url on browser, how to retrieve data from database using ajax in laravel 8 app will look like in the following image:

how to retrieve data from database using ajax in laravel 8

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *