AJAX post not sending data to laravel controller

Question

Maybe this is a very common topic, but i can't find any solution!, the app i'm developing is under Laravel 5.0, i need to send some data from jquery ajax to a laravel controller, i've followed this tutorial to post data using ajax, i've followed the steps and made the global configuration, so that i have a meta with the csrf token, when i send the post request to a url using ajax, it just sends the token!! but nothing of the data i give it to send!

Here's my ajax func (i'm using dummy data to test it):

        $.ajax( {
            url        : '/reservacion/paso-uno/enviar',
            method     : 'post',
            data       : { name: "John", location: "Boston" }
        } );

but when i dd(\Request::all()); in the post func i only get the token, also if i check the headers form data i only get this:

Here's a complete image of the headers:

Here's the meta tag with the csrf:

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

And here's the global ajax setup:

$.ajaxSetup({
                headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
            });

BIG UPDATE

Don't know why, neither how, i guess it was just a cache problem, but having the above configuration it sends data, but that happens only when i have a <input type='submit' > and in jquery setup the click event, because if i setup it for the submit event it reloads the page with a query string in the browser path.

Now the problem is that the function of the controller is not reached... when i click on the button nothing happens, data is send but it dont reaches laravel controller.

Solution 1

i hope this will help you.

set meta-tag like follows

<meta name="csrf-token" content="{{ csrf_token() }}">

set route

Route::get('/your/url/goes/here',
        [
        'uses' => 'TestController@testFunction'
        ]);

set controller function

on top use Input;

public function iddtest()
{
print_r(Input::all());
}

request like follows

$.ajax({
    data: {data1:'data1',data2:'data2'},
    url: '/your/url/goes/here',
    type: 'POST',
    beforeSend: function (request) {
        return request.setRequestHeader('X-CSRF-Token', $("meta[name='csrf-token']").attr('content'));
    },
    success: function(response){
        console.log(response);
    }
})

Solution 2

HTML Form

Somewhere in the form add the CSRF Token like this

<meta name="csrf-token" content="{{ csrf_token() }}">

Route

Add a post route

Route::post('/path/to/ajax-form-process', 'FormController@processor');

Form process method

class FormController extends Controller{

  public function processor(Request $request){
    $input = $request->all();

    //Do other processes

    return '200'; //Use any string that is appropriate
  }

}

jQuery Ajax

In your JS/jQuery script add the following

$.ajax({
  type: "POST",
  url: 'path/to/ajax-form-process',
  data: {
    data1: 'data1',
    data2: 'data2',
    data3: 'data3'
  },
  success: function(html){
    console.log(html);
  }
});

Comments

[Jonathan Solorzano]

I did what you said but nothing happened... same result

[Patrick Moore]

Remove $.ajaxSetup() entry as well?

[Jonathan Solorzano]

Yes, i did remove the ajaxSetup

[Patrick Moore]

Can you check again? It's POSTing properly at this fiddle: jsfiddle.net/bLuvf7sw

[Jonathan Solorzano]

Noup, it's not posting and right now i'm facing a problem, when i click the button it reloads the page

[Patrick Moore]

If it's submitting the page (reloading the page) then you have broken JavaScript somewhere that's submitting your form in-browser