Mrunali Khandekar
Mrunali Khandekar

Mrunali Khandekar

Insert Data Using Ajax In Laravel.

Mrunali Khandekar's photo
Mrunali Khandekar
·Jan 5, 2021·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

1) Install laravel Project. Using below command.

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

2) Set route as follows


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){
        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

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

                                    <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>

<script src=


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

    $( document ).ready(function() {
        $("#submit_chapter").click('submit',function() {
            // alert($('#name').val());
                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>");
                        $('#dataInserted').html("<span class=\"text-success\"> Set Added </span>");




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) {

Now migrate the table using below command

php artisan migrate

And that's it, you are all done.

Did you find this article valuable?

Support Mrunali Khandekar by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
Share this