Yêu cầu JS POST góc không gửi dữ liệu JSON

Question

Tôi đang cố gắng gửi một đối tượng dưới dạng JSON tới dịch vụ web của tôi trong Flask đang chờ JSON trong dữ liệu yêu cầu.

Tôi đã thử nghiệm dịch vụ theo cách thủ công bằng cách gửi dữ liệu JSON và nó hoạt động tốt. Tuy nhiên, khi tôi cố gắng thực hiện một yêu cầu POST qua bộ điều khiển góc, máy chủ web gửi cho tôi một thông báo nói rằng nó không nhận được JSON.

Khi tôi kiểm tra các tiêu đề yêu cầu trong Chrome dường như dữ liệu không được gửi trong JSON nhưng cặp khóa/giá trị thường xuyên thậm chí thông qua Type Nội dung được thiết lập để 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 

Nếu bạn nhìn thấy dòng cuối cùng bên dưới Yêu cầu Tải trọng, bạn có thể thấy dữ liệu không ở định dạng JSON.

Đây là HTTP POST cuộc gọi trong bộ điều khiển góc của tôi:

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

Tôi gửi các dữ liệu như một đối tượng {} nhưng tôi đã cố gắng gửi nó sau khi serializing bởi JSON.stringify Tuy nhiên, không có gì tôi làm dường như gửi JSON tới máy chủ.

Thực sự đánh giá cao nếu ai đó có thể trợ giúp.

Answer 1

Nếu bạn đang tuần tự hóa đối tượng dữ liệu của mình, đối tượng dữ liệu đó sẽ không phải là đối tượng json thích hợp. Lấy những gì bạn có và chỉ quấn đối tượng dữ liệu vào 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

Tôi đã thử ví dụ của bạn và nó hoạt động tốt:

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

Bạn đang sử dụng phiên bản mới nhất của AngularJS?

Answer 3

Bạn có thể sử dụng 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 } 
}) 

Giải pháp này từ http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

Answer 4

bạn có thể sử dụng phương pháp của bạn bằng cách này

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

bạn có thể sử dụng sau đây để tìm những dữ liệu được đăng .

data = json.loads(request.raw_post_data)

Answer 6

cố gắng sử dụng url tuyệt đối. nếu nó không hoạt động, kiểm tra xem phản ứng dịch vụ có tiêu đề:

Access-Control-Allow-Origin và Access-Control-Allow-Headers

ví dụ:

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