Angular JS POST request not sending JSON data - web-services

Question

I am trying to send an object as JSON to my webservice in Flask that is expecting JSON in the request data.
I have tested the service manually by sending JSON data and it works fine. However, when I try to make a http POST request through angular controller, the web server sends me a message saying it did not receive JSON.
When I inspect the request headers in Chrome it appears that data is not being sent in JSON but regular key/value pairs even through the Content Type is set to application/json
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:49
Content-Type:application/json;charset=UTF-8
DNT:1
Host:localhost:5000
Origin:http://localhost:5000
Referer:http://localhost:5000/
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload
application=AirFare&d1=10-APR-2013&d2=14-APR-2013
If you seen the last line below Request Payload, you can see the data is not in JSON format.
This is the HTTP POST call in my angular controller:
$http({
url: '/user_to_itsr',
method: "POST",
data: {application:app, from:d1, to:d2},
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
$scope.users = data.users; // assign $scope.persons here as promise is resolved here
}).error(function (data, status, headers, config) {
$scope.status = status + ' ' + headers;
});
};
I am sending the data as an object {} but I have tried to send it after serializing by JSON.stringify however, nothing I do seems to send JSON to the server.
Really appreciate if somebody can help out.

Answer 1

If you are serializing your data object, it will not be a proper json object. Take what you have, and just wrap the data object in a JSON.stringify().
$http({
url: '/user_to_itsr',
method: "POST",
data: JSON.stringify({application:app, from:d1, to:d2}),
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
$scope.users = data.users; // assign $scope.persons here as promise is resolved here
}).error(function (data, status, headers, config) {
$scope.status = status + ' ' + headers;
});

Answer 2

I have tried your example and it works just fine:
var app = 'AirFare';
var d1 = new Date();
var d2 = new Date();
$http({
url: '/api/test',
method: 'POST',
headers: { 'Content-Type': 'application/json' },
data: {application: app, from: d1, to: d2}
});
Output:
Content-Length:91
Content-Type:application/json
Host:localhost:1234
Origin:http://localhost:1234
Referer:http://localhost:1234/index.html
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload
{"application":"AirFare","from":"2013-10-10T11:47:50.681Z","to":"2013-10-10T11:47:50.681Z"}
Are you using the latest version of AngularJS?

Answer 3

You can use FormData API https://developer.mozilla.org/en-US/docs/Web/API/FormData
var data = new FormData;
data.append('from', from);
data.append('to', to);
$http({
url: '/path',
method: 'POST',
data: data,
transformRequest: false,
headers: { 'Content-Type': undefined }
})
This solution from http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

Answer 4

you can use your method by this way
var app = 'AirFare';
var d1 = new Date();
var d2 = new Date();
$http({
url: '/api/apiControllerName/methodName',
method: 'POST',
params: {application:app, from:d1, to:d2},
headers: { 'Content-Type': 'application/json;charset=utf-8' },
//timeout: 1,
//cache: false,
//transformRequest: false,
//transformResponse: false
}).then(function (results) {
return results;
}).catch(function (e) {
});

Answer 5

try to use absolute url. if it not works, check if service's response has headers:
Access-Control-Allow-Origin and Access-Control-Allow-Headers
for example:
"Access-Control-Allow-Origin": "*"
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept"

Answer 6

you can use the following to find the posted data.
data = json.loads(request.raw_post_data)

Answer 7

$http({
url: '/api/user',
method: "POST",
data: angular.toJson(yourData)
}).success(function (data, status, headers, config) {
$scope.users = data.users;
}).error(function (data, status, headers, config) {
$scope.status = status + ' ' + headers;
});