web services - services - Solicitud Angular JS POST que no envía datos JSON

http get angularjs example

Question

Estoy intentando enviar un objeto como JSON a mi servicio web en Flask que está esperando JSON en los datos de solicitud.

He probado el servicio manualmente enviando datos JSON y funciona bien. Sin embargo, cuando trato de realizar una solicitud HTTP POST a través de un controlador angular, el servidor web me envía un mensaje que dice que no recibió JSON.

Cuando inspecciono los encabezados de solicitud en Chrome, parece que los datos no se envían en JSON, pero los pares de clave / valor regulares incluso a través del Tipo de contenido están configurados como 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

Si vio la última línea debajo de Solicitar carga, puede ver que los datos no están en formato JSON.

Esta es la llamada HTTP POST en mi controlador angular:

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

Estoy enviando los datos como un objeto {} pero he intentado enviarlos después de la serialización por JSON.stringify; sin embargo, nada de lo que hago parece enviar JSON al servidor.

Realmente aprecio si alguien puede ayudar.

Answer 1

He intentado con tu ejemplo y funciona muy bien:

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

Salida:

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"}

¿Estás usando la última versión de AngularJS?

Answer 2

Puede usar la API FormData 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 }
})

Esta solución de http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

Answer 3

Si está serializando su objeto de datos, no será un objeto json adecuado. Toma lo que tienes, y simplemente envuelve el objeto de datos en un 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 4

intente usar url absoluta. si no funciona, compruebe si la respuesta del servicio tiene encabezados:

Access-Control-Allow-Origin y Access-Control-Allow-Headers

por ejemplo:

"Access-Control-Allow-Origin": "*"
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept"

Answer 5

puede usar lo siguiente para encontrar los datos publicados.

data = json.loads(request.raw_post_data)

Answer 6

puedes usar tu método de esta manera

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