How to post data controller in Laravel 5.4? - ajax

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

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);
}
});
});

Answer 3

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();
}