Laravel 9 Fetch Data Using Ajax Tutorial Example - Tuts Make

Laravel 9 Fetch Data using Ajax Tutorial Example - Tuts Make about:reader?url=https%3A%2F%2Fwww.tutsmake.com%2Flaravel-8-f...
tutsmake.com
Laravel 9 Fetch Data using Ajax

Tutorial Example - Tuts Make
Admin
5-7 minutes
Laravel 9, 8 fetch data using ajax. In this tutorial, we will show you
how to retrieve data from database using ajax in laravel 9, 8 app.
When you are making an app in Laravel 9, 8 app. Then you have
to show some data on the page or modals without refreshing the
page. At that time, you can display the data by using Jquery and
Ajax in laravel 8 app. That too without refreshing the entire page.
So, this tutorial will guide you how to fetch data using ajax in
laravel 9, 8 app. And as well as how to display it.
How to Retrieve Data from Database using Ajax in

Laravel 9
• 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
1 of 8 10/5/2022, 8:29 PM
• 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 8 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:
2 of 8 10/5/2022, 8:29 PM
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:
1 <?php
2 namespace App\Http\Controllers;
3 use Illuminate\Http\Request;
4 use Redirect,Response;
5 use App\Models\User;
6 class AjaxController extends Controller
7 {
8 public function index()
9 {
10 $data['users'] =
11 User::orderBy('id','desc')->paginate(8);
12 return view('list',$data);
3 of 8 10/5/2022, 8:29 PM
13 }
14 public function show($id)
15 {
16 $where = array('id' => $id);
17 $user = User::where($where)->first();
18 return Response::json($user);
19 }
20 }
21
22
23
24
25
26
27
28
29
30
31
32
33
34
4 of 8 10/5/2022, 8:29 PM
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:
After that, create one modal for display data on it using ajax. So
add the following code into list.blade.php file:
1 <div class="modal fade" id="ajax-modal" aria-
2 hidden="true">
3 <div class="modal-dialog">
4 <div class="modal-content">
5 <div class="modal-header">
6 <h4 class="modal-title"
id="userShowModal"></h4>
7
</div>
8
<div class="modal-body">
9
<form id="userForm" name="userForm"
10
class="form-horizontal">
11
<input type="hidden"
12 name="user_id" id="user_id">
13 <div class="form-group">
14 <label for="name" class="col-
15 sm-2 control-label">Name</label>
16 <div class="col-sm-12">
5 of 8 10/5/2022, 8:29 PM
17 <input type="text"
18 class="form-control" id="name" name="name"

placeholder="Enter Name" value="" maxlength="50"
19
required="">
20
</div>
21
</div>
22
<div class="form-group">
23
<label class="col-sm-2
24 control-label">Email</label>
25 <div class="col-sm-12">
26 <input type="email"
27 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:
1 <script>
2 $(document).ready(function () {
6 of 8 10/5/2022, 8:29 PM
3 $.ajaxSetup({
4 headers: {
5 'X-CSRF-TOKEN': $('meta[name="csrf-
6 token"]').attr('content')
7 }
8 });
9 $('body').on('click', '#show-user', function

() {
10
var user_id = $(this).data('id');
11
$.get('ajax-crud/' + user_id +'/edit',
12
function (data) {
13
$('#userShowModal').html("User
14 Details");
15 $('#ajax-modal').modal('show');
16 $('#user_id').val(data.id);
17 $('#name').val(data.name);
18 $('#email').val(data.email);
19 })
20 });
21 });
22 </script>
23
24
7 of 8 10/5/2022, 8:29 PM
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 9, 8 fetch data using ajax tutorial, you have learned how to
retrieve data from database using ajax in laravel 9, 8 app.
Recommended Laravel Tutorials
If you have any questions or thoughts to share, use the comment

form below to reach us.
8 of 8 10/5/2022, 8:29 PM

Laravel 9 Fetch Data Using Ajax Tutorial Example - Tuts Make

Uploaded by

Copyright:

Available Formats

Laravel 9 Fetch Data Using Ajax Tutorial Example - Tuts Make

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Laravel 9 Fetch Data Using Ajax Tutorial Example - Tuts Make

Uploaded by

Copyright:

Available Formats

Laravel 9 Fetch Data using Ajax Tutorial Example - Tuts Make about:reader?url=https%3A%2F%2Fwww.tutsmake.com%2Flaravel-8-f...

Laravel 9 Fetch Data using Ajax

How to Retrieve Data from Database using Ajax in

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

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

Step 2 – Connecting App to Database

Step 3 – Execute Database Migration Command

In this step, execute the following command to create tables into

php artisan migrate

Step 4 – Add Routes

Route::get('list', [AjaxController::class, 'index']);

Step 5 – Create Controller Using Artisan Command

In this step, execute the following command to create ajax

php artisan make:controller AjaxController

6 class AjaxController extends Controller

14 public function show($id)

16 $where = array('id' => $id);

Step 6 – Create Blade Views

Then add the following code into the list.blade.php file:

1 <div class="modal fade" id="ajax-modal" aria-

18 class="form-control" id="name" name="name"

9 $('body').on('click', '#show-user', function

Step 7 – Run Development Server

In this step, execute the php artisan serve command on terminal to

php artisan serve

Step 8 – Test This app

Now, open browser and hit the following url on it:

Recommended Laravel Tutorials

If you have any questions or thoughts to share, use the comment

You might also like