# Laravel 8 Ajax Get Data From Database Example

## 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=mysqlDB\_HOST=127.0.0.1DB\_PORT=3306DB\_DATABASE=db nameDB\_USERNAME=db user nameDB\_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:\<?phpuse 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:\<?phpnamespace 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">](https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">) \<script src="[https://code.jquery.com/jquery-3.5.1.min.js">\\](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](https://laratutorials.com/wp-content/uploads/2020/09/how-to-retrieve-data-from-database-using-ajax-in-laravel-1024x401.png)