Hello Devs,
In this tutorial, we are going to see example of laravel 7 jquery ajax post example.
Follow this step by step guide given below:
Step 1:
Create Routes routes/web.php
Route::get('ajaxRequest', 'AjaxController@ajaxRequest');
Route::post('ajaxRequest', 'AjaxController@ajaxRequestPost')->name('ajaxRequest.post');
Step 2:
Create Controller app/Http/Controllers/AjaxController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class AjaxController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function ajaxRequest()
{
return view('ajaxRequest');
}
/**
* Create a new controller instance.
*
* @return void
*/
public function ajaxRequestPost(Request $request)
{
$input = $request->all();
\Log::info($input);
return response()->json(['success'=>'Got Simple Ajax Request.']);
}
}
Step 3:
Create Blade File resources/views/ajaxRequest.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 7 Ajax Request example - Rathorji.in</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
<body>
<div class="container">
<h1>Laravel 7 Ajax Request example - Rathorji.in</h1>
<form>
<div class="form-group">
<label>Name:</label>
<input type="text" name="name" class="form-control" placeholder="Name" required="">
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" name="password" class="form-control" placeholder="Password" required="">
</div>
<div class="form-group">
<strong>Email:</strong>
<input type="email" name="email" class="form-control" placeholder="Email" required="">
</div>
<div class="form-group">
<button class="btn btn-success btn-submit">Submit</button>
</div>
</form>
</div>
</body>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(".btn-submit").click(function(e){
e.preventDefault();
var name = $("input[name=name]").val();
var password = $("input[name=password]").val();
var email = $("input[name=email]").val();
$.ajax({
type:'POST',
url:"{{ route('ajaxRequest.post') }}",
data:{name:name, password:password, email:email},
success:function(data){
alert(data.success);
}
});
});
</script>
</html>
Run this command:
php artisan serve
Open this URL:
http://localhost:8000/ajaxRequest
OUTPUT:
[2020-03-05 11:23:50] local.INFO: array (
'name' => 'rathorji',
'password' => '123456',
'email' => 'rathorji@gmail.com',
)
I hope this example helps you.