AngularJS POST请求不发送JSON数据

Question

我想发送一个对象作为JSON到我的Web服务中的Flask，期望请求数据中的JSON。

我已通过发送JSON数据手动测试了该服务，它工作正常。但是，当我尝试通过角度控制器发出http POST请求时，Web服务器向我发送一条消息，表明它没有收到JSON。

当我检查在Chrome请求头，似乎数据不被使用JSON但常规键/值对发送，甚至通过内容类型设置为应用程序/ 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 

如果你看过请求有效负载下面的最后一行，可以看到数据不是JSON格式。

这是我的角度控制器的HTTP POST电话：

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

我发送数据为对象{}，但我已经试过然而，通过JSON.stringify序列化后发送，没有我办似乎将JSON发送到服务器。

真的很感谢有人能帮忙。

Answer 1

如果你序列化你的数据对象，它将不是一个合适的json对象。采取你所拥有的，然后将数据对象包装在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

我曾尝试你的榜样，它工作得很好：

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

输出：

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

您使用的是最新版本的AngularJS的？

Answer 3

您可以使用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 } 
}) 

这从http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

Answer 4

您可以通过这种方式使用你的方法解决方案

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

您可以使用以下方法来查找发布的数据。

data = json.loads(request.raw_post_data)

Answer 6

尝试使用绝对URL。如果它不工作，检查服务的响应具有头：

访问控制允许来源和访问控制允许报头

例如：

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

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