Laravel 5.8 Ajax Tutorial Example

March 14, 2019 | Category : Laravel 5.8 Laravel 5 Ajax JQuery Laravel PHP

In this example, i will show you how to send ajax request in laravel 5.8. we can easily send jquery ajax request like post request, get request, put request, delete request etc.

You will learn how to write ajax request code in view file and how to pass data from view to controller using ajax in laravel 5.8. you can easily also send json response.

If you are using post request then you must have to pass csrf token to ajax request. so in this example i will give you very simple example of ajax post request.

Follow bellow write step to create ajax request in laravel 5.8 application.

Create Ajax Routes:

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');

Create HomeController:

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

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();

return response()->json(['success'=>'Got Simple Ajax Request.']);

}

}

Create View 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.8 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.8 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...