Home Ajax Laravel Ajax GET Request Example

Laravel Ajax GET Request Example

by Shahriar Sagor
Laravel Ajax GET Request

Hello dev’s today now in this post i will show you laravel ajax get request example. This is my main topics for this post. Here i will use the ajax get request in laravel example. If you have any question about the ajax get request with parameters laravel then here I will give you a simple example also with a solution. If you want to see example of laravel ajax get the request with parameter then i hope you are in the right place. So, let’s start and follow few step to create an example of laravel ajax get the request data.

Now in this example, i will create a list of users also with a show button. When we click on the show button then i will be open the modal and then get data by using ajax to display. So we can fetch data by using jquery ajax get in laravel 6, laravel 7, laravel 8 and laravel 9 any version as well.

Let’s start and follow the below steps:

Step 1: Install Laravel

This is a optional; however, if we have not created the laravel application, then we may go ahead and need to execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Dummy Users

Here, i will create some dummy records on users table and then import them.

so let’s need to run the following commands:

Create Dummy Records:

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

Step 3: Create UserController Controller

Now in this point, now we have to create a new controller as UserController. Then in this controller, i will add index and then show method, that i will return users with filter.

Let’s start and update the following code to our controller file:

app/Http/Controllers/UserController.php

<?php
   
namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
use App\Models\User;
    
class UserController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {        
        $users = User::paginate(10);
 
        return view('users', compact('users'));
    }
 
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        $user = User::find($id);
  
        return response()->json($user);
    }
}

Step 4: Add Route

So in this is step we have to create the route for listing users. Then open our “routes/web.php” file and then add the following route.

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('users.show');

Step 5: Create View

This is the last step, so let’s create the users.blade.php(resources/views/users.blade.php) for layout and then i will write design code here and put the following code:

resources/views/users.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Pagination Pretty URL Example - Codingspoint.com</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
    <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>
</head>
<body>
       
<div class="container">
    <h1>Laravel Ajax Get Request Example - Codingspoint.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)" 
                        id="show-user" 
                        data-url="{{ route('users.show', $user->id) }}" 
                        class="btn btn-info"
                        >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" id="exampleModalLabel">Show User</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="user-id"></span></p>
        <p><strong>Name:</strong> <span id="user-name"></span></p>
        <p><strong>Email:</strong> <span id="user-email"></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 type="text/javascript">
     
    $(document).ready(function () {
     
        /*------------------------------------------
        --------------------------------------------
        When click user on Show Button
        --------------------------------------------
        --------------------------------------------*/
        $('body').on('click', '#show-user', function () {
 
          var userURL = $(this).data('url');
 
            $.ajax({
                url: userURL,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $('#userShowModal').modal('show');
                    $('#user-id').text(data.id);
                    $('#user-name').text(data.name);
                    $('#user-email').text(data.email);
                }
            });
 
       });
        
    });
   
</script>
      
</html>

Run Laravel App:

That’s good all the required steps have been done. So now we have to type the given below command and then hit enter to run the Laravel appliction:

php artisan serve

Read Also: php artisan serve not working in Laravel

Thanks for read. I hope it help you. For more you can follow us on facebook

close

You may also like