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