Laravel 8 Ajax Example Tutorial

In this tutorial you will learn about the Laravel 8 Ajax Example Tutorial and its application with practical example.

In this Laravel 8 Ajax Example tutorial I will show you how to use ajax in laravel 8 applications. In this tutorial you will learn to use ajax in laravel 8. In this article I will demonstrate you how to retrieve data from database using ajax in laravel. With ajax you can get data from database without reloading or refreshing page in laravel 8. In this step by step guide you will understand laravel ajax request implementation.

Table Of Contents−

Laravel 8 Ajax Example Tutorial

In this step by step tutorial I will demonstrate you with example how to get data from database using ajax in laravel 8 application. Please follow instruction given below:

Install Laravel Project
Make Database Connection
Model and Migration

Create Controller
Create Routes
Create Layout

Make Ajax Request
Define AJAX Logic
Test Laravel AJAX App

Install Laravel Project

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

composer create-project laravel/laravel laravel-ajax-crud --prefer-dist

1	composer create-project laravel/laravel laravel-ajax-crud --prefer-dist

now, switch into the project directory using following command

Create & Configure Model and Migration

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Todo -m

1	php artisan make:model Todo -m

Add Values in Model

Open app/Models/Todo.php and put the following code in it.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Todo extends Model
{
    use HasFactory;
    protected $fillable = ['title', 'description'];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Todo extends Model

{

use HasFactory;

protected $fillable = ['title', 'description'];

}

Configure and Run Migration

open xxxx_xx_xx_xxxxxx_create_todos_table.php migration file and update the function up() method as following:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateTodosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('todos', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('todos');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateTodosTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('todos', function (Blueprint $table) {

$table->id();

$table->string('title');

$table->string('description');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('todos');

}

Run Migration

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Create Controller

Now, lets create a controller named CrudController using command given below –

php artisan make:controller CrudController

1	php artisan make:controller CrudController

Paste the following code in the newly created controller in app/Http/Controllers/CrudController.php file.

app/Http/Controllers/CrudController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Response;
use App\Models\Todo;


class CrudController extends Controller {

    /**
     * Display a listing of the resource.
     *
     */
    public function index()
    {
        $todo = Todo::all();
        return view('home')->with(compact('todo'));
    }

    /**
     * Store a newly created resource in storage.
     *
     */
    public function store(Request $request)
    {
        $data = $request->validate([
            'title' => 'required|max:255',
            'description' => 'required'
        ]);
        $todo = Todo::create($data);

        return Response::json($todo);
    }

}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Response;

use App\Models\Todo;

class CrudController extends Controller {

/**

* Display a listing of the resource.

public function index()

{

$todo = Todo::all();

return view('home')->with(compact('todo'));

}

/**

* Store a newly created resource in storage.

public function store(Request $request)

{

$data = $request->validate([

'title' => 'required|max:255',

'description' => 'required'

]);

$todo = Todo::create($data);

return Response::json($todo);

}

Create Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CrudController;

/*
|--------------------------------------------------------------------------
| 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('/', [CrudController::class, 'index']);

Route::resource('todo', CrudController::class);

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\CrudController;

|--------------------------------------------------------------------------

| 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('/', [CrudController::class, 'index']);

Route::resource('todo', CrudController::class);

Create Layout

In this step we will create blade file to show you how to use AJAX in the Laravel application. Got to resources/views folder and create home.blade.php file. After creating home.blade.php file, we will create views/layouts/app.blade.php file. Now add the following code in the app.blade.php file.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Laravel AJAX CRUD Example</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<body class="container mt-5">

    @yield('content')

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <script src="{{ asset('js/todo.js') }}" defer></script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Laravel AJAX CRUD Example</title>

</head>

@yield('content')

</body>

</html>

Make Ajax request in Laravel

Put the following code in views/home.blade.php file.

@extends('layouts.app')

@section('content')

<div class="container">

    <div class="d-flex bd-highlight mb-4">
        <div class="p-2 w-100 bd-highlight">
            <h2>Laravel AJAX Example</h2>
        </div>
        <div class="p-2 flex-shrink-0 bd-highlight">
            <button class="btn btn-success" id="btn-add">
                Add Todo
            </button>
        </div>
    </div>

    <div>
        <table class="table table-inverse">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody id="todos-list" name="todos-list">
                @foreach ($todo as $data)
                <tr id="todo{{$data->id}}">
                    <td>{{$data->id}}</td>
                    <td>{{$data->title}}</td>
                    <td>{{$data->description}}</td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <div class="modal fade" id="formModal" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="formModalLabel">Create Todo</h4>
                    </div>
                    <div class="modal-body">
                        <form id="myForm" name="myForm" class="form-horizontal" novalidate="">

                            <div class="form-group">
                                <label>Title</label>
                                <input type="text" class="form-control" id="title" name="title"
                                        placeholder="Enter title" value="">
                            </div>

                            <div class="form-group">
                                <label>Description</label>
                                    <input type="text" class="form-control" id="description" name="description"
                                        placeholder="Enter Description" value="">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="btn-save" value="add">Save changes
                        </button>
                        <input type="hidden" id="todo_id" name="todo_id" value="0">
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection

@extends('layouts.app')

@section('content')

<h2>Laravel AJAX Example</h2>

</div>

Add Todo

</button>

</div>

<div>

<thead>

<tr>

<th>Title</th>

<th>Description</th>

</tr>

</thead>

@foreach ($todo as $data)

<td>{{$data->title}}</td>

<td>{{$data->description}}</td>

</tr>

@endforeach

</tbody>

</table>

<h4 class="modal-title" id="formModalLabel">Create Todo</h4>

</div>

<label>Title</label>

<input type="text" class="form-control" id="title" name="title"

placeholder="Enter title" value="">

</div>

<label>Description</label>

<input type="text" class="form-control" id="description" name="description"

placeholder="Enter Description" value="">

</div>

</form>

</div>

<button type="button" class="btn btn-primary" id="btn-save" value="add">Save changes

</button>

</div>

@endsection

AJAX Logic in Laravel

Now, we will create a todo.js file inside the public/js folder. Put the following code in it.

jQuery(document).ready(function($){

    //----- Open model CREATE -----//
    jQuery('#btn-add').click(function () {
        jQuery('#btn-save').val("add");
        jQuery('#myForm').trigger("reset");
        jQuery('#formModal').modal('show');
    });

    // CREATE
    $("#btn-save").click(function (e) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
            }
        });
        e.preventDefault();
        var formData = {
            title: jQuery('#title').val(),
            description: jQuery('#description').val(),
        };
        var state = jQuery('#btn-save').val();
        var type = "POST";
        var todo_id = jQuery('#todo_id').val();
        var ajaxurl = 'todo';
        $.ajax({
            type: type,
            url: ajaxurl,
            data: formData,
            dataType: 'json',
            success: function (data) {
                var todo = '<tr id="todo' + data.id + '"><td>' + data.id + '</td><td>' + data.title + '</td><td>' + data.description + '</td>';
                if (state == "add") {
                    jQuery('#todo-list').append(todo);
                } else {
                    jQuery("#todo" + todo_id).replaceWith(todo);
                }
                jQuery('#myForm').trigger("reset");
                jQuery('#formModal').modal('hide')
            },
            error: function (data) {
                console.log(data);
            }
        });
    });
});

jQuery(document).ready(function($){

//----- Open model CREATE -----//

jQuery('#btn-add').click(function () {

jQuery('#btn-save').val("add");

jQuery('#myForm').trigger("reset");

jQuery('#formModal').modal('show');

});

// CREATE

$("#btn-save").click(function (e) {

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')

}

});

e.preventDefault();

var formData = {

title: jQuery('#title').val(),

description: jQuery('#description').val(),

};

var state = jQuery('#btn-save').val();

var type = "POST";

var todo_id = jQuery('#todo_id').val();

var ajaxurl = 'todo';

$.ajax({

type: type,

url: ajaxurl,

data: formData,

dataType: 'json',

success: function (data) {

var todo = '<tr id="todo' + data.id + '"><td>' + data.id + '</td><td>' + data.title + '</td><td>' + data.description + '</td>';

if (state == "add") {

jQuery('#todo-list').append(todo);

} else {

jQuery("#todo" + todo_id).replaceWith(todo);

}

jQuery('#myForm').trigger("reset");

jQuery('#formModal').modal('hide')

error: function (data) {

console.log(data);

}

});

Test Laravel AJAX App

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

 http://127.0.0.1:8000/todo

1	http://127.0.0.1:8000/todo

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Ajax Example Tutorial