Laravel 8 Ajax Request Example

Laravel , Laravel 8

Nicesnippets

163561

12-09-2020


Laravel 8 Ajax Request Example

Hi Guys,

In this tutorial, I am going to learn you ajax request example in laravel 8. This example will help you laravel 8 ajax form submit example. step by step explain jquery ajax request laravel 8. you can understand a concept of jquery ajax post laravel 8 csrf.

Ajax request is a basic requirement of any php project, we are always looking for without page refresh data should store in database and it's possible only by jquery ajax request. same thing if you need to write ajax form submit in laravel 8 then i will help you how you can pass data with ajax request and get on controller.

Here I will give you full example for laravel 8 jquery ajax post example. So, let's follow few step to create example of jquery ajax request laravel 8.

Step 1 : Install Laravel 8


In the first step, we need to get fresh laravel 8 version application So let's open terminal and run bellow command to install fresh laravel project.

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

Step 2 : Database Configuration

In second step, we will make database Configuration for example database name, username, password etc for ajax form submit example of laravel 8 So lets open .env file and all deatils like as bellow:

.env

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name(blog)

DB_USERNAME=here database username(root)

DB_PASSWORD=here database password(root)

Step 3 : Create Migration

we are going to create file upload application for students. so we have to create migration for "students" table using Laravel 8 php artisan command, so first fire bellow command:

php artisan make:migration create_students_table

After this command you will find one file in following path "database/migrations" and you have to put bellow code in your migration file for create students table

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreatestudentsTable extends Migration

{

/**

* Run the migrations.

*

* @return void

*/

public function up()

{

Schema::create('students', function (Blueprint $table) {

$table->id();

$table->string('email');

$table->string('password');

$table->text('address');

$table->timestamps();

});

}

/**

* Reverse the migrations.

*

* @return void

*/

public function down()

{

Schema::dropIfExists('students');

}

}

Now you have to run this migration by following command:

php artisan migrate

Step 4: Add Route

Here, we need to add route for ajax form submit. so open your "routes/web.php" file and add following route.

routes/web.php

use App\Http\Controllers\StudentController;

Route::get('ajax/request', [StudentController::class, 'ajaxRequest'])->name('ajax.request');

Route::post('ajax/request/store', [StudentController::class, 'ajaxRequestStore'])->name('ajax.request.store');

Step 5: Add Controller and Model

In this step, now we should create new controller as StudentController. So run bellow command and create new controller. bellow controller for create StudentController.

php artisan make:controller StudentController --model=StudentController

After bellow command you will find new file in this path "app/Http/Controllers/StudentController.php".

In this controller will create two methods as bellow:

1)fileUpload()

2)fileUploadPost()

So, let's copy bellow code and put on StudentController.php file.

app/Http/Controllers/StudentController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Student;

class StudentController extends Controller

{

/**

* Display a listing of the myformPost.

*

* @return \Illuminate\Http\Response

*/

public function ajaxRequest()

{

return view('ajaxExample');

}

/**

* Display a listing of the myformPost.

*

* @return \Illuminate\Http\Response

*/

public function ajaxRequestStore(Request $request)

{

$validator = Validator::make($request->all(), [

'password' => 'required',

'email' => 'required|email',

'address' => 'required',

]);

if ($validator->passes()) {

// Store Data in DATABASE from HERE

return response()->json(['success'=>'Added new records.']);

}

return response()->json(['error'=>$validator->errors()]);

}

}

Ok, so after run bellow command you will find "app/Models/Student.php" and put bellow content in Student.php file:

app/Models/Student.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Student extends Model

{

use HasFactory;

/**

* The attributes that are mass assignable.

*

* @var array

*/

protected $fillable = [

'email', 'password','address'

];

}

Step 6: Add Blade File

In last step. In this step we have to create just blade students. So mainly we have to create ajaxExample file. So finally you have to create one following bellow blade file:

1) ajaxExample.blade.php

So let's just create following file and put bellow code.

resources/views/ajaxExample.blade.php

resources/views/ajaxExample.blade.php

<!DOCTYPE html>

<html lang="en">

<head>

<title>Ajax Request Example Laravel 8</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<style type="text/css">

body{

background:#f2f2f2;

}

.section{

padding:50px;

background:#fff;

}

</style>

</head>

<body>

<div class="container" style="margin-top: 100px;">

<div class="row">

<div class="offset-md-3 col-md-6 section">

<h2>Ajax Request Example Laravel 8</h2>

<div class="alert alert-success alert-block" style="display: none;">

<button type="button" class="close" data-dismiss="alert">×</button>

<strong class="success-msg"></strong>

</div>

<form>

@csrf

<div class="form-group">

<label for="email">Email:</label>

<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">

<span class="text-danger error-text email_err"></span>

</div>

<div class="form-group">

<label for="pwd">Password:</label>

<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="password">

<span class="text-danger error-text password_err"></span>

</div>

<div class="form-group">

<label for="address">Address:</label>

<textarea class="form-control" name="address" id="address" placeholder="Address"></textarea>

<span class="text-danger error-text address_err"></span>

</div>

<button type="submit" class="btn btn-primary btn-submit">Submit</button>

</form>

</div>

</div>

</div>

<script type="text/javascript">

$(document).ready(function() {

$(".btn-submit").click(function(e){

e.preventDefault();

var _token = $("input[name='_token']").val();

var email = $("#email").val();

var pswd = $("#pwd").val();

var address = $("#address").val();

$.ajax({

url: "{{ route('ajax.request.store') }}",

type:'POST',

data: {_token:_token, email:email, pswd:pswd,address:address},

success: function(data) {

printMsg(data);

}

});

});

function printMsg (msg) {

if($.isEmptyObject(msg.error)){

console.log(msg.success);

$('.alert-block').css('display','block').append('<strong>'+msg.success+'</strong>');

}else{

$.each( msg.error, function( key, value ) {

$('.'+key+'_err').text(value);

});

}

}

});

</script>

</body>

</html>

Now we are ready to run ajax form submit request with laravel 8 so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:

localhost:8000/ajax/request

You will see layout as like bellow:

Form with Validation

Store Data Success

I hope it can help you....


Recommended Posts