10-Apr-2023
.
Admin
Hi Guys,
This article will provide example of laravel 7 jquery ajax post example. you can see laravel 7 ajax form submit example. In this article, we will implement a jquery ajax request laravel 7. I’m going to show you about jquery ajax post laravel 7 csrf. you will do the following things for jquery ajax post request laravel 7.
In this example,I will show how to ajax post request in laravel 7.you will learn laravel 7 jquery ajax post example. this example will help you laravel 7 ajax form submit example. 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 7 then i will help you how you can pass data with ajax request and get on controller
Here follow this example of ajax post request in laravel 7.
Step 1: Create Routes
In this step we put two routes in one for displaying view and another for post ajax. So simple add both routes in your route file.
routes/web.php
Route::get('ajaxRequest', 'AjaxController@ajaxRequest');
Route::post('ajaxRequest', 'AjaxController@ajaxRequestPost')->name('ajaxRequest.post');
Step 2: Create Controller
Now in this step we will add two new method for routes. One will handle view layout and another for post ajax request method, so let's add bellow:
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
In this last step we will write code of jquery ajax and pass laravel token. So blade file is very important in ajax request. So let's see bellow file:
resources/views/ajaxRequest.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 7 Ajax Request example - Nicesnippets.com</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 - Nicesnippets.com</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>
Now we are ready to run our example so run bellow command for quick run:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/ajaxRequest
Output
[2020-03-05 11:23:50] local.INFO: array (
'name' => 'nicesnippets',
'password' => '123456',
'email' => 'nicesnippets@gmail.com',
)
It will help you...
#Laravel 7
