laravel ajax request params yields null - php

Question

I am new to laravel framework and started following the laravel tasks tutorial.
I am trying to pass via ajax request the name of the task in order to save it in the database.
front end:
var taskdata= {
"name": $("#new_task").val()
};
//console.log(JSON.stringify(taskdata));
$.ajax({
url: '/task',
type: 'POST',
data: taskdata,
contentType: 'json',
processData: false,
success: function(result) {
alert("success");
}
});
server side:
Route::post('/task', function (Request $request) {
//die(var_dump($request->json("name")));
$validator = Validator::make(json_decode($request->getContent(), true), [
'name' => 'required|max:255',
]);
if ($validator->fails()) {
return redirect('/')
->withInput()
->withErrors($validator);
}
$task = new \App\Task;
$task->name = $request->name;
$task->save();
return redirect('/');
});

Answer 1

When using the validate method during an AJAX request, Laravel will not generate a redirect response. Instead, Laravel generates a JSON response containing all of the validation errors. This JSON response will be sent with a 422 HTTP status code.
Hence you could change your controller method to
Route::post('/task', function (Request $request) {
$validator = Validator::make($request->all(), [
'name' => 'required|max:255',
]);
if ($validator->fails()) {
return $validator->errors()->all();
}
$task = new \App\Task;
$task->name = $request->name;
$task->save();
return url("/");
});
and your ajax method as
var taskdata= {
"name": $("#new_task").val(),
"_token" : "{{ csrf_token() }}"
};
$.ajax({
url: '/task',
type: 'POST',
data: taskdata,
contentType: 'json',
success: function(result) {
console.log(result); // The url
},
error: function (data) {
console.log(data.responseJSON); // Here you could see the error
}
});

Answer 2

Here's a better way to solve that:
Route::post('/task', function (Request $request) {
$validator = Validator::make($request->all(), [
'name' => 'required|max:255',
]);
if ($validator->fails()) {
throw new ValidationException($validator); //Your error handler should send JSON or redirect as appropriate.
}
$task = new \App\Task;
$task->name = $request->name;
$task->save();
if ($request->expectsJson()) {
return response()->json(true); //Success
} else {
return redirect()->to("/");
}
});
Update:
You also need to let jQuery process the data so it constructs a proper query:
var taskdata= {"name": $("#new_task").val()};
//console.log(JSON.stringify(taskdata));
$.ajax({
url: '/task',
type: 'POST',
data: taskdata,
contentType: 'json',
processData: true, //Or remove it completely since the default is true
success: function(result) {
alert("success");
}
});