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