In this tutorial, I will talk about laravel 7 Ajax Request. That means I will now discuss how we can use ajax request in our laravel 7 application to send HTTP requests.
Ajax request in Laravel Application
Ajax Request is a basic requirement of any PHP project to send HTTP requests to a server. By using the Ajax Method we can retrieve or store information in the database without page refresh. The user feels better about using this type of feature.
Whats we are doing here?
We’ll see how to send laravel ajax mail data to an administrator and get data to an administrator. We’ll also see how to learn about the laravel ajax URL path with parameters.
But now in this laravel ajax example tutorial we will see how to send Ajax post or get the request in laravel 7. It is pretty simple and easy to use in laravel applications. You have to follow some common steps to learn how to use Ajax request in laravel 7.
Step 1: Create Route
firstly we have to create two routes. One for view and another for sending HTTP ajax request. Paste this below code
routes/web.php
Route::get('ajax', 'AjaxController@view');
Route::post('ajax', 'AjaxController@send_http_request')->name('ajaxRequest.post');Step 2: Create Controller
Now we have to create a controller to handle the above two methods. So create a controller and paste the following code.
app/Http/Controllers/AjaxController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class AjaxController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function view()
{
return view('test');
}
/**
* Create a new controller instance.
*
* @return void
*/
public function send_http_request(Request $request)
{
\Log::info($request->all());
return response()->json([
'success'=>'get your data'
]);
}
}Since this is our testing tutorial on how to use laravel and ajax. So here we don’t store our Ajax request data into the database. We see it in log file.
Step 3: Create Blade File
finally, we have to create our blade component to create HTML form. So now paste the below content to your test.blade.php file.
resources/views/test.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 7 Ajax Request example - codechief.org </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/3.2.0/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>
// web designing world//
<div class="container">
<h1>Laravel 7 Ajax Request example - codechief.org</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 I you can run this code and visit those route URLs and give input in HTML form then you will get the below output.
storage/logs/laravel.log
[2020-03-27 03:54:19] local.INFO: array ( 'name' => 'kishan kumar', 'password' => '123456', 'email' => 'info@appfinz.com', )
I hope this laravel ajax example tutorial will help you.
