使用$http POST Content-Type application/x-www-form-urlencoded访问API总是会得到“false”结果

Question

我有以下REST服务，我必须通过POST方法访问它，我可以通过jQuery访问它，但我不知道如何使用AngularJS（v1）

<string xmlns = "http://schemas.microsoft.com/2003/10/Serialization/">
    <script id = "tinyhippos-injected" /> 
      {
        "volumeResult": {
            "gyydt": "9771241.17704773",
            "gytotal": "29864436.1770477",
            "gybudgeted": "29864436.1770477",
            "lyydt": "10197350",
            "lytotal": "27859381",
            "lybudgeted": "10197350",
            "cyytd": "6992208",
            "lastUpdate": "March-2017"
        },
        "valueResult": {
            "gyydt": "26862094",
            "gytotal": "68217952",
            "gybudgeted": "68232952",
            "lyydt": "0",
            "lytotal": "0",
            "lybudgeted": "0",
            "cyytd": "68217952",
            "lastUpdate": "March-2017"
        },
        "trucksResult": {
            "gyydt": "165951",
            "gytotal": "497879",
            "gybudgeted": "497879",
            "lyydt": "168822",
            "lytotal": "468814",
            "lybudgeted": "168822",
            "cyytd": "119442",
            "lastUpdate": "March-2017"
        }
    } 
</string>

这是我的控制器。js:

angular.module('starter.controllers', [])
.controller('DashCtrl', ['$scope', '$http', function ($scope, $http) {

    $http({
        //headers: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'},
        headers: {'Content-Type' : 'application/json'},
        url: 'https://myurl../api/getHPData',
        method: 'POST',
        // data: data, 
        params: {
            "stationId": 263, 
            "crusherId": 27, 
            "monthYear": '2016-04'
        }
    })
    .then(function (response) {
                console.log(response);
     })
// I don't have to use .success and .error function as they are [depricated][2]

//.success(function (data, status, headers, config) {

//      $scope.greeting = data;
//      var Result = JSON.stringify(data);
//      var Result = JSON.parse(data);
//})
//.error(function (error, status, headers, config) {
//  console.log("====================== Error Status is: " + error);
//  console.log("====================== Status is: " + status);
//  console.log("====================== Error occured");
//})
}]) // eof controller DashCtrl

.controller('MapsCtrl', function($scope) {})

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };
});

我想要的是“volumeResult”的值

问题：

1. 它总是返回：

对象{data:“{”result:“false”}，状态：200，配置：Object，状态文本：“OK”，标题：function}

和

当我通过monthDay没有引号它处理（算术）它作为（2016-04 = 2012)

因为服务是POST，但是当我在ChromeDevelopers Tool中分析它时，我得到：（查询字符串，这不是POST）

爱奥尼亚。捆js:25005 XHR已完成加载：后“https://myurl../api/getHPData?crusherId=27

可能的解决方案：要么我使用了错误的标题：

headers: {
         'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 
         'Accept':       'application/json'
         },

或者标题可能是，

headers: {
        'Content-Type': 'application/json', 
        'Accept':       'application/json'
        },

或者正如我朋友所说：

当我将您的代码更改为使用上述代码时，会出现以下错误：“{”消息“：“请求的资源不支持http方法“选项”。}”，这意味着存在CORS（跨源资源共享）问题。Chrome正试图发出一个“飞行前”请求以允许CORS，但服务器不知道如何处理它。

但我不认为这是因为我收到：

对象{data:“{”result:“false”}，状态：200，配置：Object，状态文本：“OK”，标题：function}

从服务器。注意：{“result”：“false”}是服务器在未找到数据或传递错误参数时显示的消息。下面的jQuery代码也是我可以访问服务器的证明。：）

编辑

jQuery片段：

<script>
$(document).ready(function() {
        get_homepage_data(263, 27, '2016-04');

        function get_homepage_data(stationIds, crusherIds, date) {
            var url = "https://myurl..";
            var data_to_send = {
                'stationId': stationIds, 
                'crusherId': crusherIds,
                'monthYear': date
            };

            console.log("Value is: " + JSON.stringify(data_to_send));
            //change sender name with account holder name
            //        console.log(data_to_send)
            $.ajax({
                url: url,
                method:   'post',
                dataType: 'json',
                //contentType: 'application/json',
                data: data_to_send,
                processData: true,
                // crossDomain: true,
                beforeSend: function () {
                }
                , complete: function () {}
                , success: function (result1) {

                    // I know I can do it in one line but lazy enough to edit it here :p 
                    var Result = JSON.parse(result1);
                    var value_data = Result["valueResult"];
                    var foo = value_data["gyydt"];

                    console.log("Log of foo is: " + foo);

                    var foo2 = 0;
                    // 10 lac is one million.
                    foo2 = foo / 1000000 + ' million';

                    console.log(JSON.stringify(value_data["gyydt"]) + " in million is: " + foo2);
                }
                , error: function (request, error) {
                    return false;
                }
            });
        }   
    }); // eof Document. Ready  
</script>

以上脚本的输出是脚本是：

值为：{“stationId”：263，“crusherId”：27，“monthYear”：“2016-04”}XHR完成加载：POST”https://myurl../api/getHPData“.foo的对数是：26862094”26862094“百万分之26862094”是：26862094，这确实是完美的。：）

Answer 1

我得到了答案。哇。

感谢georgeawg的回答：

他说：

发布URL编码的表单数据时，使用$httpParamSerializer服务转换请求：

$http({
    headers: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'},
    url: 'https://myurl..',
    method: 'POST',
    transformRequest: $httpParamSerializer,
    transformResponse: function (x) {
      return angular.fromJson(angular.fromJson(x));
    },
    data: {
      "stationId": 263,
      "crusherId": 27,
      "monthYear": '2016-04'
    }
}) 
  .then(function(response) {
    console.log(response);
    $scope.res = response.data;
    console.log($scope.res);
});

通常，$http服务会自动解析JSON编码对象的结果，但此API返回的字符串已从对象双重序列化。transformresponsee功能修复了该问题。

现在我能够得到值的gyall作为：

    var myData = parseFloat(response.data.valueResult.gytotal);
    console.log(myData);

Answer 2

尝试以这种方式使用$http。。

$http.post("https://myurl../..",JSON.stringify({
            stationId: 263, 
            crusherId: 27, 
            monthYear:'2016-04'
        })).then(function(res){

          console.log(res);

        }).catch(function(errors){
          console.log(errors);
})