一尘不染

使用$ http POST Content-Type应用程序/ x-www-form-urlencoded访问API

angularjs

我想上网本REST API,它接受三个参数: stationIdcrusherIdmonthYear 我做它像这样在AngularJS为:

$http({
        //headers: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'},
        //headers: {'Content-Type': 'application/json; charset=UTF-8'},
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 
            'Accept':       'application/json'
        },
        url:    'https://myurl../api/getHPData',
        method: 'POST',
        data: {
            stationId: 263, 
            crusherId: 27, 
            monthYear: '2016-4'
        }
    })

    .then(function(data, status, headers, config) {
            //console.log(JSON.stringify(response));
            console.log(data);
     })
    .catch(function(error){
            //console.log("Error: " + JSON.stringify(error));
            console.log(error);
        })

但是我总是这样:

对象{数据:“ {”结果“:”假“}”“,状态:200,配置:对象,状态文本:”确定“,标头:功能}

要么

{“ data”:“ {\” result \“:\” false \“}”,“状态”:200,“ config”:{“方法”:“ POST”,“
transformRequest”:[null],“ transformResponse “:[null],”标头“:{” Content-
Type“:” application / x-www-form-urlencoded; charset = UTF-8“,” Accept“:”
application / json“},” url“: “
https://myurl../api/getHPData ”,“ data”:{“
stationId”:263,“ crusherId”:27,“ monthYear”:“ 2016-4”}},“ statusText”:“ OK”
}

如果我更改header Content-Type为:

headers: {'Content-Type': 'application/json; charset=UTF-8'},

它给:

对象{数据:null,状态:-1,配置:对象,statusText:“”,标头:函数}

要么

{“数据”:null,“状态”:-1,“配置”:{“方法”:“ POST”,“ transformRequest”:[null],“
transformResponse”:[null],“标题”:{“内容-Type“:” application / json; charset =
UTF-8“,” Accept“:” application / json,text / plain, / “},” url“:”
https://myurl../api/getHPData “ ,“数据”:{“
stationId”:263,“ crusherId”:27,“ monthYear”:“ 2016-4”}},“ statusText”:“”}

我做错了,请帮帮我。

柱塞在这里:

https://plnkr.co/edit/57SiCdBZB2OkhdR03VOs?p=preview

(编辑)

注意: 我可以这样做jQuery

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

        function get_homepage_data(stationIds, crusherIds, date) {
            var url = "https://myurl../api/getHPData";
            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) {
                    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>

上面脚本的输出script是:

  • 值是:{“ stationId”:263,“ crusherId”:27,“ monthYear”:“ 2016-04”}
  • XHR完成加载:POST“ https://myurl../api/getHPData ”。
  • foo的日志是:26862094
  • 以百万为单位的“ 26862094”是:26862.94万

这是完美的。:)


阅读 280

收藏
2020-07-04

共1个答案

一尘不染

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

$http({
    headers: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'},
    url: 'https://fnrc.gov.ae/roayaservices/api/getHPData',
    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返回的是已从对象进行双重序列化的字符串。该transformResponse功能解决了该问题。

PLNKR上演示

2020-07-04