Laravel 5 AJAX 500 Error on Post

Question

I am trying to follow this tutorial for Laravel 5 and AJAX https://www.youtube.com/watch?v=PRCm-7mEDkY which obviously works, but am getting a 500 Internal Server Error on the Post Request. What am I doing wrong? I just want to understand a simple example and work up from there.

HTML

<a href="#" id="get">Get</a>
<hr>
<form action="#">
    <input type="text" name="name">
    <button type="submit">Send</button>
</form>

JS

$(function() {
    $('#get').click(function(e){

        e.preventDefault();

        $.get('categories', function(data) {
            console.log(data);
        });
    });

    $('form').submit(function(e) {
        e.preventDefault();

        $.post('categories', {name:'name anything'}, function(data) {
            console.log(data);
        });
    });

});

Route

Route::post('/categories', function() {
    if(Request::ajax() ) {
        var_dump(Input::all());
        return 'ajax post request';
    }
});

Storage Logs

#0 /Users/neil/Sites/demo02/app/Http/Middleware/VerifyCsrfToken.php(17): Illuminate\Foundation\Http\Middleware\VerifyCsrfToken->handle(Object(Illuminate\Http\Request), Object(Closure))
#1 /Users/neil/Sites/demo02/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(125): App\Http\Middleware\VerifyCsrfToken->handle(Object(Illuminate\Http\Request), Object(Closure))
#2 /Users/neil/Sites/demo02/vendor/laravel/framework/src/Illuminate/View/Middleware/ShareErrorsFromSession.php(55): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#3 /Users/neil/Sites/demo02/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(125): Illuminate\View\Middleware\ShareErrorsFromSession->handle(Object(Illuminate\Http\Request), Object(Closure))
#4 /Users/neil/Sites/demo02/vendor/laravel/framework/src/Illuminate/Session/Middleware/StartSession.php(61): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#5 /Users/neil/Sites/demo02/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(125): Illuminate\Session\Middleware\StartSession->handle(Object(Illuminate\Http\Request), Object(Closure))
#6 /Users/neil/Sites/demo02/vendor/laravel/framework/src/Illuminate/Cookie/Middleware/AddQueuedCookiesToResponse.php(36): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#7 /Users/neil/Sites/demo02/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(125): Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse->handle(Object(Illuminate\Http\Request), Object(Closure))
#8 /Users/neil/Sites/demo02/vendor/laravel/framework/src/Illuminate/Cookie/Middleware/EncryptCookies.php(40): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#9 /Users/neil/Sites/demo02/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(125): Illuminate\Cookie\Middleware\EncryptCookies->handle(Object(Illuminate\Http\Request), Object(Closure))
#10 /Users/neil/Sites/demo02/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/CheckForMaintenanceMode.php(42): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#11 /Users/neil/Sites/demo02/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(125): Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode->handle(Object(Illuminate\Http\Request), Object(Closure))
#12 [internal function]: Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#13 /Users/neil/Sites/demo02/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(101): call_user_func(Object(Closure), Object(Illuminate\Http\Request))
#14 /Users/neil/Sites/demo02/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(111): Illuminate\Pipeline\Pipeline->then(Object(Closure))
#15 /Users/neil/Sites/demo02/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(84): Illuminate\Foundation\Http\Kernel->sendRequestThroughRouter(Object(Illuminate\Http\Request))
#16 /Users/neil/Sites/demo02/public/index.php(53): Illuminate\Foundation\Http\Kernel->handle(Object(Illuminate\Http\Request))
#17 /Users/neil/Sites/demo02/server.php(21): require_once('/Users/neil...')
#18 {main}

Answer 1

I had a series of problems getting an AJAX form submit to work with Laravel 5. This was roughly the series of things I had to fix before I got it working:

• Make sure you're submitting the CSRF token with the AJAX request.
• Make sure your routes are definitely set up correctly (for a while I was posting my AJAX request to an incorrect endpoint: it was a route that had been set up as an alias for the main route for GET but not for POST).
• Make sure the fields you're submitting in your AJAX request's data object exactly match the fields that your endpoint is expecting (I'd got the name of one of the fields wrong when populating the data object, and that caused a 500 error because that (required) field wasn't getting set on my model.

Answer 2

As Ahmed said, this would work if the script is inside the blade template.

But if you want to, you can add the token into the template within the <head> tag in app.blade.php:

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

Be careful you have to work with blade. Then you'll need to setup ajax in your script:

$(function() {

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

    $('#get').click(function(e){

        e.preventDefault();

        $.get('categories', function(data) {
            console.log(data);
        });
    });

    $('form').submit(function(e) {
        e.preventDefault();

        $.post('categories', {name:'name anything'}, function(data) {
            console.log(data);
        });
    });
});

Concerning your 405 get error, did you create the get route ?

Route::get('categories', function() {
    return "Hello there!";
});

Answer 3

In laravel 5 csrf token is required for all post requests. You will have to add the _token field in post request body or add the header X-CSRF-TOKEN.

More information

http://laravel.com/docs/master/routing#csrf-protection

One possible solution [if the JS is inside the blade template].

$(function() {
$('#get').click(function(e){

    e.preventDefault();

    $.get('categories', function(data) {
        console.log(data);
    });
});

$('form').submit(function(e) {
    e.preventDefault();

    $.post('categories', {name:'name anything', _token: '{{ csrf_token() }}'}, function(data) {
        console.log(data);
    });
});

});