How to post data controller in Laravel 5.4?

Question

I cannot post my data to my controller, is there something wrong with my ajax call? my setup for the web.php, or is the controller not setup, the error i get is. reminder this is laravel 5.4 running locally

POST http://127.0.0.1:8000/change-rank 500 (Internal Server Error)

JS

$('.rank-select').change(function(){
    var id = $(this).val();
    var memberId = $(this).closest('.irmember').attr('id');
    console.log(id);
    console.log(memberId);
    $.ajax({
                type: "POST",
                url: 'change-rank',
                data: {id: id, memberId, memberId},
                success: function( msg ) {
                    console.log(msg);
                }
            });
})

web.php

Route::post('change-rank', 'RankController@changeRank');

RankController.php

namespace App\Http\Controllers;

use App\Rank;
use Illuminate\Http\Request;

class RankController extends Controller
{
    public function changeRank()
    {
        info("hi");
    }
}

Answer 1

The JS code you show does not include the CSRF token, which will certainly throw a 500 server error. There are different ways to include your CSRF token in AJAX calls, here's one example.

In your form:

<form>
    {{ csrf_token() }}
    ....

In your JS:

var token = $('input[name="_token"]');
....
$.ajax({
    data: {_token: token, id: id, memberId: memberId},
    ...

There are other approaches here on SO, and the Laravel docs suggest another method.

BTW, 500 server error is just a generic error telling you that, well, there was a server error. You really need to know what the error was if you want to solve it - and you should be able to see that in both the laravel and webserver (Apache/nginx/etc) logs. Your logs probably say something like "CSRF TokenMismatchException" which might have led you straight to the answer! :-)

EDIT

I've just noticed a typo in your Javascript which I initially copied into my answer. It may just be a typo here and not in your real code as it would likely throw JS errors rather than run and generate server error.

data: {_token: token, id: id, memberId, memberId},

should be:

data: {_token: token, id: id, memberId: memberId},

(colon after memberId).

Answer 2

Its simple change to ajax params its should work fine.

$('.rank-select').change(function(){
    var id = $(this).val();
    var memberId = $(this).closest('.irmember').attr('id');
    console.log(id);
    console.log(memberId);
    $.ajax({
        type: "POST",
        url: 'change-rank',
        data: {id:id, memberId:memberId},
        success: function( data) {
            console.log(data);
        }
    });
});

And controller file is,

public function changeRank(Request $request)
{
    return $request->all();
}

Answer 3

Change your JS code like:

$('.rank-select').change(function(){
    var id = $(this).val();
    var memberId = $(this).closest('.irmember').attr('id');
    console.log(id);
    console.log(memberId);
    $.ajax({
                type: "POST",
                url: 'change-rank',
                data: {id:id, memberId:memberId},
                success: function( msg ) {
                    console.log(msg);
                }
            });
});