Friday, March 4, 2016

Using ajax post request in laravel 5.2

Hi

Today I am going to discuss, how to use ajax post request in laravel 5.2.

There are 2 method to use ajax post request in laravel. We will discuss one by one.

1. Adding on each request
2. Globally

1. Adding on each request and post data to controller.

To use this method, we have to add token on each ajax call with data which is posting.
Let say we have a login form:

Login form view

<div class="secure">Secure Login form</div>
{!! Form::open(array('url'=>'account/login','method'=>'POST', 'id'=>'myform')) !!}
<div class="control-group">
  <div class="controls">
     {!! Form::text('email','',array('id'=>'','class'=>'form-control span6','placeholder' => 'Email')) !!}
  </div>
</div>
<div class="control-group">
  <div class="controls">
  {!! Form::password('password',array('class'=>'form-control span6', 'placeholder' => 'Please Enter your Password')) !!}
  </div>
</div>
{!! Form::button('Login', array('class'=>'send-btn')) !!}
{!! Form::close() !!}

using laravel form method, laravel already put a hidden field with name '_token' like below

<input type='hidden' name='_token' value="{!! csrf_token() !!}">

if you are using custom form then you have to write {!! csrf_field() !!} under the form section.

Now add ajax call of post data in given file or footer layout.

<script type="text/javascript">
$(document).ready(function(){
  $('.send-btn').click(function(){          
    $.ajax({
      url: 'login',
      type: "post",
      data: {'email':$('input[name=email]').val(), '_token': $('input[name=_token]').val()},
      success: function(data){
        alert(data);
      }
    });    
  });
});
</script>

Now add your post route to app/Http/routes.php page.

Route::post('account/login', 'AccountController@login');

Now make a controller to app/Http/Controllers with named AccountController.php and add login function to it.

<?php namespace App\Http\Controllers;
use Input;
use Request;
class AccountController extends Controller {
  public function login() {
    // Getting all post data
    if(Request::ajax()) {
      $data = Input::all();
      print_r($data);die;
    }
}
?>

2. Globally Way:

In this way we will add token for globally work with ajax call or post. so no need to send it with data post.

Add a meta tag to your layout header :- csrf_token() will be the same as "_token" CSRF token that Laravel automatically adds in the hidden input on every form.

<meta name="_token" content="{!! csrf_token() !!}"/>


Now add below code to footer of your layout, or where it will set for globally or whole site pages. this will pass token to each ajax request.

<script type="text/javascript">
$.ajaxSetup({
   headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
});
</script>

Now make an ajax post request and you are done your data will post successfully.

1 comment:

  1. If you ever struggle with errors or other issues in QuickBooks, you can dial our QuickBooks Customer Service Number 1-833-325-0220 and receive instant help from our QB experts.

    ReplyDelete