Getting data from POST request - ajax

Question

I'm trying to update some data of my User Entity using AJAX request with VueJS-Ressource.
Here is my AJAX request:
this.$http.post('/profile/edit', {
description: this.description
}).then(response => {
console.log(response);
}, response => {
console.log(response);
});
Here is the controller where I receive this AJAX request:
/**
* #Route("/edit", name="profile_edit")
* #Method({"POST"})
*/
public function profileEditAction(Request $request) {
if ($request->isXmlHttpRequest()) {
/* #var User $user */
$user = $this->getUser();
$description = $request->request->get( 'description');
if (isset($description)) {
$user->setDescription($description);
$this->getDoctrine()->getManager()->flush($user);
return new Response('Updated User description with success !');
}
return new Response('No description parameter found');
}
return $this->redirectToRoute('homepage');
}
My issue is that every time I'm trying to get a parameter from my request using $request->request->get('PARAMETER_NAME'), it return a null value.
Whereas I display my request from my browser, I clearly sees that i'm sending something:
Full AJAX Request: https://i.gyazo.com/825ea438b09e4df8d8287555a1c841a6.png
I hope someone could help me with this, thanks you !

Answer 1

Try posting the data as FromData (so that Content-Type is sent as multipart/form-data).
In VueJS, do this:
var formData = new FormData();
formData.append('description', this.description);
this.$http.post('/profile/edit', formData)
.then(response => {
console.log(response);
}, reason => {
console.log(reason);
});
Make sure in Dev Tools -> Network you see the sent data as Form Data (not as Request Payload ).
On server do var_dump( $request->request->all() ) and see what request contains.