Laravel 9 Ajax CRUD Tutorial Example

Hello Artisan,

This article will give you an example of Laravel 9 ajax crud example with modal. From this Laravel 9 crud tutorial, you can understand the concept of Laravel 9 ajax crud example tutorial. I explained step by step about Laravel 9 jquery ajax crud example. I will help you to give an example of ajax Laravel 9 crud with a popup modal.

In this ajax Laravel 9 crud with popup modal tutorial, I will use modal to edit and create our data. I don't create new pages. From a single page, I will complete this crud tutorial of Laravel and Ajax. So in this ajax tutorial in Laravel, you will also know how to set up ajax in Laravel 9. 

Using jQuery Ajax request I will create, update, delete and read system in Laravel 9. So you will also learn how to set up Ajax and work with Ajax requests in Laravel 9 and create a complete crud application with a modal. So let's start our Laravel 9 Ajax crud tutorial. I will use a sweet alert to show a success and error message.

You can also check the GitHub repository of this tutorial. Just check this below link

Repository: Laravel Ajax Crud Github

Now you can see the preview of this tutorial that what we are going to create right now. So see the below image to check Laravel Ajax 9 crud tutorial preview.

Preview: company list

Preview: create a company modal form

Preview: edit company modal form

So now let's start our example tutorial.

Step 1: Download laravel

To create Laravel 9 ajax crud, download a fresh Laravel 9 using the below command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Create Migration

For this Laravel ajax crud tutorial we have to create our company model. so run the below command.

php artisan make:model Company -m

In this step, I will use the Company model and companies table to create an ajax Laravel 9 crud application. So paste this below code to your company's table.

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

class CreateCompaniesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('companies', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('address');
            $table->timestamps();
        });
    }

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

After creating "companies" table you should setup Company model for ajax crud with Laravel, paste this following code to the Company model.

app/Models/Company.php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Company extends Model
{
    protected $fillable = [
        'name',
        'address'
    ];
}

Now run the migration command php artisan migrate after configuring your database. 

Step 3: Define routes

Now, we need to define the routes like: 

routes/web.php

Route::get('/company', [CompanyController::class,'view'])->name('company.index');
Route::get('/companies', [CompanyController::class,'get_company_data'])->name('data');
Route::get('/addcompany', [CompanyController::class,'view'])->name('company.view');
Route::post('/addcompany', [CompanyController::class,'Store'])->name('company.store');
Route::delete('/addcompany/{id}', [CompanyController::class,'destroy'])->name('company.destroy');
Route::get('/addcompany/{id}/edit', [CompanyController::class,'update'])->name('company.update');

Step 4: Create Controller

Now we need a controller. So create a company controller for Laravel ajax crud.

php artisan make:controller CompanyController

Now open the company controller and paste this below code

app/Http/Controllers/CompanyController.php

namespace App\Http\Controllers;

use App\Company;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class CompanyController extends Controller
{
  public function view()
  {
      return view('company.index');
  }

  public function get_company_data(Request $request)
  {
      $companies = Company::latest()->paginate(5);

      return Request::ajax() ? 
                   response()->json($companies,Response::HTTP_OK) 
                   : abort(404);
  }

  public function Store(Request $request)
  {
    Company::updateOrCreate(
      [
        'id' => $request->id
      ],
      [
        'name' => $request->name,
        'address' => $request->address
      ]
    );

    return response()->json(
      [
        'success' => true,
        'message' => 'Data inserted successfully'
      ]
    );
  }

  public function update($id)
  {
    $comapny  = Company::find($id);

    return response()->json([
      'data' => $comapny
    ]);
  }
  
  public function destroy($id)
  {
    $company = Company::find($id);

    $company->delete();

    return response()->json([
      'message' => 'Data deleted successfully!'
    ]);
  }

}

Step 5: Create View File

Now everything is ok. we have to just create our view file. so create a view inside the following directory

resources/views/layouts/app.blade.php

resources/views/company/index.blade.php

resources/views/company/modal.blade.php

Now just we have to include our javascript file. Then we can run our laravel ajax crud tutorial. So create a ajax.js file inside the following directory.

public/js/ajax.js

Now all are set to go and run the below command and check:

php artisan serve

And visit

Read also : Laravel Vue JS CRUD Example With File Upload and Pagination

Hope this tutorial will help you.