Create New Post

Laravel - Ajax

We'll create a basic application of handling AJAX requests in Laravel that fetches user data asynchronously .

1. Setup Laravel Project:

If you haven't created a Laravel project yet, you can do so using Composer:

composer create-project --prefer-dist laravel/laravel ajax-example
cd ajax-example
 

2. Create Database and Model:

Create a database, update the .env file with your database credentials, and run migrations.

php artisan migrate
 

Create a model for the User:

php artisan make:model User -m

In the generated migration file (database/migrations/xxxx_xx_xx_create_users_table.php), add some columns to the users table:

public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->timestamps();
    });
}

Run migrations:

php artisan migrate

3. Create Controller:

Create a controller for handling AJAX requests:

php artisan make:controller UserController

use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    public function getUsers()
    {
        $users = User::all();
        return response()->json($users);
    }
}
 

4. Create Route:

Define a route in routes/web.php or routes/api.php:

use App\Http\Controllers\UserController;

Route::get('/get-users', [UserController::class, 'getUsers']);

5. Create Blade View:

Create a Blade view (resources/views/welcome.blade.php) with a button to trigger the AJAX request:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>AJAX Example</title>
</head>
<body>

    <button id="fetch-users">Fetch Users</button>

    <ul id="user-list"></ul>

    <script src="{{ asset('js/app.js') }}"></script>
    <script>
        document.getElementById('fetch-users').addEventListener('click', function () {
            fetchUsers();
        });

        function fetchUsers() {
            fetch('/get-users')
                .then(response => response.json())
                .then(users => {
                    const userList = document.getElementById('user-list');
                    userList.innerHTML = '';

                    users.forEach(user => {
                        const listItem = document.createElement('li');
                        listItem.textContent = user.name;
                        userList.appendChild(listItem);
                    });
                })
                .catch(error => console.error(error));
        }
    </script>

</body>
</html>

6. Run the Application:

Run the development server:

php artisan serve

Visit http://127.0.0.1:8000 in your browser. Click the "Fetch Users" button, and you should see the list of users fetched asynchronously.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

15745