Insert Data Using Ajax In Laravel.

1) Install laravel Project. Using below command.

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

2) Set route as follows

route::get('/',[App\Http\Controllers\AjaxController::class,'index'])->name('index');
route::post('/insert-chapter',[App\Http\Controllers\AjaxController::class,'insert_chapter'])->name('insert-chapter');

3) Create AjaxController using below command.

php artisan make:controller AjaxController

4)Go to AjaxController in app/Http/Controllers/AjaxController.php

 public function index(){
        return view('insert');
    }

  public function insert_chapter(Request $request){
        date_default_timezone_set('Asia/Kolkata');
        Chapter::insert(['name'=>$request->name,'created_at'=>date('Y-m-d h:i:s')]);
        return response()->json(
            [
                'success' => true,
                'message' => 'Data Inserted'
            ]
        );
    }

5) Create a insert.blade.php in resources/views and add below code

<html>
<body id="page-top">
<meta name="csrf-token" content="{{ csrf_token() }}">

  <form>
                                    <div class="form-group"><label>Enter Chapter Name</label>
                                        <input class="form-control form-control-lg" type="text" id="name" placeholder=" E.g Circular Motion" required=""></div>
                                    <div class="text-center mt-2">
                                        <button class="btn btn-outline-info border rounded" id="submit_chapter" type="submit">Add Chapter</button>
                                    </div>
                                </form>


<script src=
        "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script>

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $( document ).ready(function() {
        $("#submit_chapter").click('submit',function() {
            // alert($('#name').val());
            $.ajax({
                type: "POST",
                url: '{{route('insert-chapter')}}',
                data: {
                    name : $('#name').val()
                },
                success: function(response) {
                    // alert(response.message);
                    if(response.message == 0){
                        $('#dataInserted').html("<span class=\"text-danger\"> Fill Details </span>");
                    }else{
                        $('#dataInserted').html("<span class=\"text-success\"> Set Added </span>");
                    }

                },
            });
        })
    });
</script>

</body>

</html>

6) Create a Chapter Model using Below Command

php artisan make:model Chapter -m

Add column name as below

 protected $fillable = ['name'];

7) Go to database/migrations/create_chapter_table and column names as below

   public function up()
    {
        Schema::create('chapters', function (Blueprint $table) {
            $table->id();
            $table->longText('name');
            $table->timestamps();
        });
    }

Now migrate the table using below command

php artisan migrate

And that's it, you are all done.

Mrunali Khandekar

Mrunali Khandekar

Insert Data Using Ajax In Laravel.

Did you find this article valuable?