In this example, we will create a simple example of ajax get request in laravel 10.
1. Create Routes
First, we will create two routes for our example. One route will be used to display the view and the other route will be used to get the data from the database.
Route::get(‘ajax-get-request’, ‘AjaxGetRequestController@index’); Route::get(‘ajax-get-request/data’, ‘AjaxGetRequestController@data’);
2. Create Controller
Now, we will create a controller named AjaxGetRequestController. This controller will have two methods index() and data().
‘John Doe’, ’email’ => ‘[email protected]’, ‘phone’ => ‘1234567890’ ]; return response()->json($data); } }
3. Create View
In this step, we will create a view file named ajax-get-request.blade.php. This view file will have a button and a div to display the data.
Laravel 10 Ajax Get Request Example – Tutsmake.com
4. Run Development Server
In the last step, we will run the development server using the following command.
php artisan serve
Now, open your browser and hit the following url:
http://localhost:8000/ajax-get-request
You will see the following output:
Laravel 10 Ajax Get Request Example – Tutsmake.com
Click on the Get Data button and you will see the data fetched from the database.
Laravel 10/9 ajax get request example; Through this tutorial, you will learn how to use ajax get request for getting data from the database in laravel 10, 9 app.
Through this tutorial, we will create an example that will have a list and the list will have a Get Data button. When you click that button. Then there will be a call Get Ajax request. Which takes the data from the database and displays it in A popup modal.
Laravel 10 Ajax Get Request Example
Follow the following steps for how to create and use ajax get request in laravel apps:
- Step 1 – Setup Laravel App
- Step 2 – Connecting App to Database
- Step 3 – Execute Database Migration Command
- Step 4 – Define 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 – Setup 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 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 – Define Routes
In this step, open web.php file and add the following routes into it, which is placed inside routes directory:
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:
<?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 10/9 Get Data From Database using Ajax - Tutsmake.com</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 Ajax Get Data From Database</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 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 – 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 10/9 fetch data using ajax tutorial, you have learned how to retrieve data from database using ajax in laravel 10/9 app.
Recommended Laravel Tutorials
If you have any questions or thoughts to share, use the comment form below to reach us.
