Laravel 12 AJAX CRUD Tutorial (No Page Reload Step-by-Step Guide 2026)

  • 08-04-2026
  • 364
  • Laravel 12
  • Haresh Chauhan

Laravel 12 AJAX CRUD Tutorial: In this guide, we will build a complete CRUD (Create, Read, Update, Delete) application using AJAX in Laravel 12 without page reload.

This technique is widely used in modern web applications to improve user experience by updating data dynamically.

📌 What You Will Build

  • Add data without reload
  • Edit data dynamically
  • Delete records instantly
  • Real-time UI update

Step 1. Install Laravel

composer create-project laravel/laravel ajax-crud
cd ajax-crud

Step 2. Database Setup

📄 File: .env 
DB_DATABASE=ajax_crud
DB_USERNAME=root
DB_PASSWORD=

php artisan migrate

Step 3. Create Model & Migration

php artisan make:model Post -m
📄 File: database/migrations/xxxx_create_posts_table.php 
$table->string('title');
$table->text('description');

php artisan migrate

Step 4. Create Controller

php artisan make:controller PostController
📄 File: app/Http/Controllers/PostController.php 
namespace App\Http\Controllers;

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

class PostController extends Controller
{
    public function index()
    {
        return view('posts.index');
    }

    public function fetch()
    {
        return response()->json(Post::latest()->get());
    }

    public function store(Request $request)
    {
        $post = Post::create($request->all());
        return response()->json($post);
    }

    public function delete($id)
    {
        Post::destroy($id);
        return response()->json(['success' => true]);
    }
}

Step 5. Add Fillable

📄 File: app/Models/Post.php 
protected $fillable = ['title', 'description'];

Step 6. Routes

📄 File: routes/web.php 
use App\Http\Controllers\PostController;

Route::get('/', [PostController::class, 'index']);
Route::get('/fetch', [PostController::class, 'fetch']);
Route::post('/store', [PostController::class, 'store']);
Route::delete('/delete/{id}', [PostController::class, 'delete']);

Step 7. Blade View

📄 File: resources/views/posts/index.blade.php 
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<h2>Laravel AJAX CRUD</h2>

<input type="text" id="title" placeholder="Title">
<input type="text" id="description" placeholder="Description">
<button onclick="addPost()">Add</button>

<div id="data"></div>

<script>

function fetchPosts() {
    $.get('/fetch', function(res) {
        let html = '';
        res.forEach(post => {
            html += `
                <div>
                    <h3>${post.title}</h3>
                    <p>${post.description}</p>
                    <button onclick="deletePost(${post.id})">Delete</button>
                </div>
            `;
        });
        $('#data').html(html);
    });
}

function addPost() {
    $.post('/store', {
        _token: '{{ csrf_token() }}',
        title: $('#title').val(),
        description: $('#description').val()
    }, function() {
        fetchPosts();
    });
}

function deletePost(id) {
    $.ajax({
        url: '/delete/' + id,
        type: 'DELETE',
        data: {_token: '{{ csrf_token() }}'},
        success: function() {
            fetchPosts();
        }
    });
}

fetchPosts();

</script>

</body>
</html>

🔥 How It Works

  • AJAX sends request without reload
  • Laravel returns JSON data
  • UI updates dynamically

✅ Real Use Case

  • Admin dashboards
  • Live data systems
  • Dynamic forms

🚀 Conclusion

You have successfully built a Laravel 12 AJAX CRUD application without page reload. This improves user experience and is widely used in modern web apps.

We always thanks to you for reading our blogs.

dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)
We Are Also Recommending You :