Some day ago one fiend call me to write simple example of jquery post ajax or get ajax example in laravel 5.5 application. So if you are new in laravel framework OR you don't know how to fire ajax in laravel then you are a right place.
Here i will write very simple post ajax request example with pass csrf token in laravel 5.5 application. After end of the article you can assume, how simple run example request like GET Ajax Request, PUT Ajax Request, PATCH Ajax Request, DELETE Ajax Request and others too. So, here very basic and simple example you will learn.
Add Routes for Ajax Request:
First thing is 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', 'HomeController@ajaxRequest');
Route::post('ajaxRequest', 'HomeController@ajaxRequestPost');
Add Controller methods:
Same things as above for routes, here 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/HomeController.php
<?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()
{
$input = request()->all();
return response()->json(['success'=>'Got Simple Ajax Request.']);
}
}
Add Blade File:
Finally we require to create ajaxRequest.blade.php file and here 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 5.5 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 5.5 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:'/ajaxRequest',
data:{name:name, password:password, email:email},
success:function(data){
alert(data.success);
}
});
});
</script>
</html>
now you can run your example and see.
I hope you found your best...
Do you like below Tutorials ?
- PHP Laravel 5.5 - import export data into excel and csv using maatwebsite
- Laravel 7.x and 6.x create custom facade example from scratch
- Node JS - Get Real time online users counter using socket io example
- PHP Laravel 7.x and 6.x - Bootstrap Admin Theme Integration example from scratch
- MySQL Query - How to select records of today to next Sunday ?
- Laravel 7.x and 6.x - username custom validation example
- Laravel 5.5 - Import Extract zip file using chumper/zipper package
- PHP Laravel Set Custom Validation Error Messages Example