In this tutorial you will learn about the How to Make HTTP Requests with AJAX in Laravel 8 and Bootstrap and its application with practical example.
In this Laravel 8 Ajax Post Form Data With Validation tutorial you’ll learn to validate and submit form data without reloading or refreshing of page using ajax.
In this tutorial I’ll show you step by step how to submit and validate form data without reloading or refreshing of page using ajax. Generally Form validation is performed at server side, but can be performed at both the server and client side. In this laravel form validation tutorial we will be learning about laravel server side validations. In this tutorial, I’ll show you how to define laravel validation rules, how to validate form input and to display validation errors using ajax. In Laravel, to submit form data using ajax we must have to incorporate csrf token with form data and set X-CSRF-TOKEN request header with ajax form submit request.
How to Make HTTP Requests with AJAX in Laravel 8 and Bootstrap
In this step by step tutorial you will learn to make ajax request in laravel framework. In this tutorial I will demonstrate you how to make ajax http requests in laravel. Please follow the instruction given below:
- Install Laravel Project
- Make Database Connection
- Model and Migration
- Create Controller
- Create Routes
- Create Layout
- Make Ajax Request
- Define AJAX Logic
- Test Laravel AJAX App
- Conclusion
Install Laravel Project
First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command
|
|
composer create-project laravel/laravel laravel-ajax-crud --prefer-dist |
Setup Database Credentials
Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.
|
|
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel DB_USERNAME=root DB_PASSWORD= |
Now, in this step we will create model and migration file. Please run the following command:
|
|
php artisan make:model Todo -m |
Now, go to app/Models/Todo.php and place the following code
|
|
<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Todo extends Model { use HasFactory; protected $fillable = ['title', 'description']; } |
Now, open migrations/xxxx_xx_xx_xxxxxx_create_todos_table.php and place the following code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateTodosTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('todos', function (Blueprint $table) { $table->id(); $table->string('title'); $table->string('description'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('todos'); } } |
Now, in this step we will create model and migration file. Please run the following command:
Create Controller
Now, lets create a controller named CrudController using command given below –
|
|
php artisan make:controller CrudController |
Paste the following code in the newly created controller in app/Http/Controllers/CrudController.php file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Response; use App\Models\Todo; class CrudController extends Controller { /** * Display a listing of the resource. * */ public function index() { $todo = Todo::all(); return view('home')->with(compact('todo')); } /** * Store a newly created resource in storage. * */ public function store(Request $request) { $data = $request->validate([ 'title' => 'required|max:255', 'description' => 'required' ]); $todo = Todo::create($data); return Response::json($todo); } } |
Create Routes
After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\CrudController; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/', [CrudController::class, 'index']); Route::resource('todo', CrudController::class); |
Create Layout
After creating the recommended file, also create views/layouts/app.blade.php file and folder. Add the following code inside the app.blade.php file.
