Articles

Laravel 9 Ajax Post Request Example Tutorial

Laravel 9 ajax post request with csrf token example; Through this tutorial, we will learn how to submit or post form data on controller using ajax post request with csrf token laravel 9 apps.

Laravel 9 Ajax Post Request Example Tutorial

Follow the following steps for how to submit form data using ajax post request with csrf token in laravel 9 apps:

  • Step 1 – Download Laravel 9 Application
  • Step 2 – Setup Database with App
  • Step 3 – Create Contact us Model & Migration
  • Step 4 – Create Contact us Routes
  • Step 5 – Create Contact us Controller By Artisan Command
  • Step 6 – Create Contact us form in Blade File
  • Step 7 – Run Development Server

Step 1 – Download Laravel 9 Application

First of all download or install laravel 9 new setup. So, open terminal and type the following command to install new laravel app into your machine:

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

Step 2 – Setup Database with App

In this step, setup database with your downloded/installed laravel app. So, you need to find .env file and setup database details as following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password

Step 3 – Create Contact us Model & Migration

In this step, open again your command prompt. And run the following command on it. To create model and migration file for form:

php artisan make:model Contact -m

After that, open create_contacts_table.php file inside FormValidation/database/migrations/ directory. And the update the function up() with following code:

    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email');
            $table->text('message');
            $table->timestamps();
        });
    }

Then, open again command prompt and run the following command to create tables into database:

php artisan migrate

Step 4 – Create Contact Us Routes

In this step, open web.php file from routes direcotry. And update the following routes into web.php file:

use App\Http\Controllers\AjaxContactController;

Route::get('ajax-form', [AjaxContactController::class, 'index']);
Route::post('store-data', [AjaxContactController::class, 'store']);

Step 5 – Create Contact us Controller By Artisan Command

In this step, run the following command on command prompt to create controller file:

php artisan make:controller AjaxContactController

After that, go to app/http/controllers and open AjaxContactController.php file. And update the following code into it:

validate([
          'name' => 'required',
          'email' => 'required|unique:employees|max:255',
          'message' => 'required'
        ]);

        $save = new Contact;

        $save->name = $request->name;
        $save->email = $request->email;
        $save->message = $request->message;

        $emp->save();

        return redirect('form')->with('status', 'Ajax Form Data Has Been validated and store into database');

    }
}

Step 6 – Create Contact Us Form in Blade File

Now, Go to resources/views and create ajax-contact-us-form.blade.php. Then create one contact us form with name, email and message fields.

We have created an ajax contact us form, so, you can update the following code into ajax-contact-us-form.blade.php file:




	Laravel 9 Ajax Post Request for Submit Form with Csrf token and jQuery Validation
	

	   


Laravel 9 Ajax Post Form Data on Controller with jQuery Validation Example

@csrf

The following below jQuery and ajax code will validate form data before submitting/posting form data on the controller in laravel:

 

Step 7 – Run Development Server

Last step, open command prompt and run the following command to start developement server:

php artisan serve

Then open your browser and hit the following url on it:

http://127.0.0.1:8000/ajax-form

Recommended Laravel Tutorials



Images mentioned above related to Ajax,Jquery,Laravel are either copyright property of respective image owners.

Rabins Sharma Lamichhane

Rabins Sharma Lamichhane is the owner of RabinsXP who is constantly working for increasing the Internet of Things (IoT) in Nepal. He also builds android apps and crafts beautiful websites. He is also working with various social services. The main aim of Lamichhane is to digitally empower the citizens of Nepal and make the world spiritually sound better both in terms of technology and personal development. Rabins is also the first initiator of Digital Nepal.

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button