Laravel: Send Data to Controller via AJAX Without Form

Question

I need to send data via JS to a Laravel controller on a button click. I'm not using any form because the data is being created dynamically. Every time i try to send the data, i get an Internal Server Error (500), but unable to catch that exception in the controller or the laravel.log file.

Here's what i'm doing:

Route:

Route::post('section/saveContactItems', 'SectionController@saveContactItems');

Controller:

public function saveContactItems($id, $type, $items, $languageID = "PT"){ ... }

JS:

$('button').on("click", function (evt) {

    evt.preventDefault();

    var items = [];
    var id = $("#id").val();
    var languageID = $("#languageID").val();
    var data = { id: id, type: type, items: JSON.stringify(items), languageID: languageID };

    $.ajax({
        url: "/section/saveContactItems",
        type: "POST",
        data: data,
        cache: false,
        contentType: 'application/json; charset=utf-8',
        processData: false,
        success: function (response)
        {
            console.log(response);
        }
    });
});

What am i doing wrong? How can i accomplish this?

UPDATE: Thanks to @ShaktiPhartiyal's answer (and @Sanchit's help) i was able to solve my issue. In case some else comes into a similar problem, after following @Shakti's answer i wasn't able to access the data in the controller. So, i had to stringify the data before sending it to the server:

data: JSON.stringify(data),

When you are using POST, you have to pass csrf_token field ... — Sanchit Gupta
– Sanchit Gupta, Commented Apr 4, 2017 at 17:57
@sanchitGupta i've tried that to, but was unsuccessful too... — Ricky
– Ricky, Commented Apr 4, 2017 at 17:58
Okay... Lets try with @ShaktiPhartiyal answer below.... and let me know if its work — Sanchit Gupta
– Sanchit Gupta, Commented Apr 4, 2017 at 18:00

Shakti Phartiyal · Accepted Answer · 2017-04-04 18:16:00Z

8

You do not need to use

public function saveContactItems($id, $type, $items, $languageID = "PT"){ ... }

You have to do the following:

public function saveContactItems()
{
    $id = Input::get('id');
    $type = Input::get('type');
    $items = Input::get('items');
    $languageID = Input::get('languageID');
}

and yes as @Sanchit Gupta suggested you need to send the CSRF token with the request:

Methods to send CSRF token in AJAX:

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

If you use this approach you need to set a meta tag like so:

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

or

data: {
        "_token": "{{ csrf_token() }}",
        "id": id
        }

UPDATE

as @Sanchit Gupta pointed out use the Input facade like so:

use Input;

edited Apr 4, 2017 at 18:16

answered Apr 4, 2017 at 17:58

Shakti Phartiyal

6,3043 gold badges29 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ricky Over a year ago

I can finally access the controller action :) Now i get the following error: exception 'Symfony\Component\Debug\Exception\FatalErrorException' with message 'Class 'App\Http\Controllers\Input' not found'. This is caused by $id = Input::get('id');

Sanchit Gupta Over a year ago

Use Input facade at top of your controller

Ricky Over a year ago

Solved the error, but the data comes up is empty. This is what i'm sending to the controller: Object {id: "5", type: "email", items: "[]", languageID: "PT"}

Ricky Over a year ago

Its working! just needed to stringify the data before sending it to the controller: JSON.stringify(data);

Sanchit Gupta Over a year ago

Well Explained @ShaktiPhartiyal +1. Happy Coding :)

Collectives™ on Stack Overflow

Laravel: Send Data to Controller via AJAX Without Form

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related