Laravel Ajax GET Data Request Example Tutorial

Sovary August 12, 2022 359
5 minutes read

Today tutorial, we will use ajax to make request in Laravel as example. For beginner or student want to complete about ajax get request with parameters Laravel then I will show an example with very simple solution. This is right place for you to learn and experience Laravel tutorial to make simple ajax request with parameter and show detail information of user or any data as example. Let's follow steps below to create Laravel ajax with get request to retreived data as example.

For this sample example, we are going to display a list of users with show button detail. After list of user with paging we can click the button then we will show detail data of user in modal dialog by using ajax to retreived data from server. To perform request data in background we will use jQuery ajax to make request in Laravel 8 and Laravel 9 version.

Ajax GET Data Request Example

Table of Contents

Step 1 - Install Laravel
Step 2 - Generate User Data
Step 3 - Create Controller File
Step 4 - Add Mapping Route
Step 5 - Create View (Blade File)
Step 6 - Run Laravel Server

Step 1 - Install Laravel

We are going to install Laravel App by following command will download a fresh empty Laravel project. You can read this to know how to install Laravel project.

Step 2 - Generate User Data

Now we are going to create testing data with Tinker command. Open your terminal and let's follow below code

php artisan tinker
  
User::factory()->count(30)->create()

Step 3 - Create Controller File

This step we will create a controller file, and should name UserController.php file. In the controller we will create two methods and implement each action required. Let's check and see the following flow to create file and update code below:

Open terminal and command below:

php artisan make:controller UserController

Then check or paste below code:

Open file app -> Http -> Controllers -> UserController.php

<?php
   
namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
use App\Models\User;
    
class UserController extends Controller
{

    public function index()
    {        
        $users = User::paginate(5);
        return view('users', compact('users'));
    }

    public function show($id)
    {
        $user = User::find($id); 
        return response()->json($user);
    }
}

Step 4 - Add Mapping Route

We will add route to web.php to tell where controller and method point to correct URL.

Open file routes -> web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\UserController;
  
/*
|--------------------------------------------------------------------------
| 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('/users', [UserController::class, 'index']);
Route::get('/users/{id}', [UserController::class, 'show'])->name('show');

Step 5 - Create View (Blade File)

Now we are going to create HTML to render as UI, so in Laravel we have to create a blade file as view.

Create file resources -> views -> index.blade.php

<!DOCTYPE html>
<html>
   <head>
      <title>Laravel Get Ajax Example - CamboTutorial.com</title>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
      <div class="container">
         <h1>Laravel Ajax Get Request- CamboTutorial.com</h1>
         <table class="table table-bordered data-table">
            <thead>
               <tr>
                  <th>ID</th>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Action</th>
               </tr>
            </thead>
            <tbody>
               @foreach($users as $user)
               <tr>
                  <td>{{ $user->id }}</td>
                  <td>{{ $user->name }}</td>
                  <td>{{ $user->email }}</td>
                  <td>
                     <a href="javascript:void(0)" class="btn btn-info" onclick="show({{ route('show', $user->id) }})">Show</a>
                  </td>
               </tr>
               @endforeach
            </tbody>
         </table>
      </div>
      <!-- Modal -->
      <div class="modal fade" id="userShowModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
         <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-header">
                  <h5 class="modal-title">User Detail</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>
               <div class="modal-body">
                  <p><strong>ID:</strong> <span id="id"></span></p>
                  <p><strong>Name:</strong> <span id="name"></span></p>
                  <p><strong>Email:</strong> <span id="email"></span></p>
                  <p><strong>Registered Date:</strong> <span id="created_at"></span></p>
               </div>
               <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
               </div>
            </div>
         </div>
      </div>
   </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

  <script type="text/javascript">
    function show(link)
    {
      $.ajax({
          url: link,
          type: 'GET',
          dataType: 'json',
          success: (data) =>
          {
            $('#userShowModal').modal('show');
            $('#id').text(data.id);
            $('#name').text(data.name);
            $('#email').text(data.email);
            $('#created_at').text(data.created_at);
          }
          error: (er)=>
          {
            console.log(er);
          }
      });
    }
  </script>
</html>

Step 6 - Run Laravel Server

All steps are done, now it's time to start the server to see the result. Run following command below to activated the server.

php artisan serve

Launch browser and go to http://localhost:8000/users

Thanks for read this making ajax get data request article, hope it would help your project. Have a nice day!

You might Also Like:

Laravel PHP Laravel 9

Author

Founder of CamboTutorial.com, I am happy to share my knowledge related to programming that can help other people. I love write tutorial related to PHP, Laravel, Python, Java, Android Developement, all published post are make simple and easy to understand for beginner. Follow him