In this article, we will be looking at steps needed to post and ajax get post request in Laravel.
Table of Contents
Ajax and Ajax Requests
Create Routes for get and post
Route::get('ajaxRequest', '[email protected]');
Route::post('ajaxRequest', '[email protected]')->name('ajaxRequest.post'); Create Controller
After creating the controller, navigate to
app\Http\Controllers\HomeController.php
Add the following code:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController 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.']);
}
} Create Blade File
<!DOCTYPE html>
<html>
<head>
<title>Laravel 7 Ajax Request example</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>
<div class="container">
<h1>Laravel 7 Ajax Request example</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> Step 01: Declaring the CSRF Token
This serves as a security mechanism against possible attacks because the hacker cannot predict the value of a user’s CSRF token.
Step 02: Make the body of your page
In the demonstrated example, we are making an HTML form which is taking the user’s name, password, and email, and then finally sending this information to be handled by ajax. If you are already familiar with HTML tags, you would already know this that the type attribute of the input tag of a form, determines the type of data that the field is going to accept. So, for:
- Name the type=“text”
- Password the type = “password”
- Email the type=”email”
Step 03: Put your AJAX code in a <script> tag
As can be seen in the code above, we have declared a <script> tag of Javascript type, since Ajax is supported by Javascript. The important things to discuss is this script are:
$.ajaxSetup()
This method sets the default values for Ajax requests to be made.
Syntax: $.ajaxSetup({name:value, name:value, … })
The method takes in name-value pairs to set the default parameters. Like in our code, it’s setting the header with the csrf-token that we defined earlier with the attribute named as content.
.click()
This method handles the click events to respond with some action. In this example we are setting this button click to the button in our form with the class “.btn-submit”. Hence, this method will invoke when the user clicks that button.
Later, in the code body of this function we have used e.preventDefault() which will stop the default action of the element to take place.
Buttons of a form in their default mode try to submit the form data to some file, but in our case we don’t want that. Instead, we only want to fetch the data from the form and let the ajax handle it. Thus, using e.preventDefault() will stop the default behavior of the button from happening.
Finally, we are just storing the values of various form inputs (name, password, email) into variables, by calling the .val() method on the name attribute of individual input fields.
$.ajax()
This method is finally used to perform an asynchronous HTTP Ajax request.
Syntax: $.ajax({name:value, name:value, … })
This method specifies the request parameters as name-value pairs for the Ajax request.
In our example code above, it is setting the request type as POST, directing the request url to one of the routes (ajaxrequest.post) that we defined in routes file, assigning the data parameters, and finally defining a success function that generates an alert when the data is successfully passed.
Output
php artisan serve Click on the provided URL and append /ajaxRequest in it. You should see the following results:
