AngularJs $ http.post()不发送数据

时间:2013-10-08 17:07:48

标签: angularjs post angular-http

有谁可以告诉我为什么以下声明不会将发布数据发送到指定的网址?当我打印$ _POST时,在服务器上调用url - 我得到一个空数组。如果我在将数据添加到数据之前在控制台中打印消息 - 它会显示正确的内容。

$http.post('request-url',  { 'message' : message });

我也尝试将数据作为字符串(具有相同的结果):

$http.post('request-url',  "message=" + message);

当我以下列格式使用它时似乎正常工作:

$http({
    method: 'POST',
    url: 'request-url',
    data: "message=" + message,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});

但是有没有办法用$ http.post()来做 - 并且我是否总是必须包含标题才能使它工作?我相信上面的内容类型是指定发送数据的格式,但我可以将其作为javascript对象发送吗?

35 个答案:

答案 0 :(得分:341)

我使用asp.net MVC和found the solution here

时遇到了同样的问题
  

AngularJS 的新人之间存在很多混淆   $http服务速记函数($http.post()等)似乎没有   可以使用 jQuery 等效项(jQuery.post()等)进行交换。

     

区别在于 jQuery AngularJS 如何序列化和传输数据。从根本上说,问题在于您选择的服务器语言本身无法理解AngularJS的传输...默认情况下, jQuery 使用

传输数据
Content-Type: x-www-form-urlencoded
     

以及熟悉的foo=bar&baz=moe序列化。

     然而,

AngularJS 使用

传输数据
Content-Type: application/json 
     

{ "foo": "bar", "baz": "moe" }

     

JSON序列化,遗憾的是一些Web服务器语言 -    PHP - 本地不会反序列化。

像魅力一样。

CODE

// Your app's root module...
angular.module('MyModule', [], function($httpProvider) {
  // Use x-www-form-urlencoded Content-Type
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

  /**
   * The workhorse; converts an object to x-www-form-urlencoded serialization.
   * @param {Object} obj
   * @return {String}
   */ 
  var param = function(obj) {
    var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

    for(name in obj) {
      value = obj[name];

      if(value instanceof Array) {
        for(i=0; i<value.length; ++i) {
          subValue = value[i];
          fullSubName = name + '[' + i + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value instanceof Object) {
        for(subName in value) {
          subValue = value[subName];
          fullSubName = name + '[' + subName + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value !== undefined && value !== null)
        query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
    }

    return query.length ? query.substr(0, query.length - 1) : query;
  };

  // Override $http service's default transformRequest
  $httpProvider.defaults.transformRequest = [function(data) {
    return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
  }];
});

答案 1 :(得分:113)

上面不是很清楚,但是如果你在PHP中收到请求,你可以使用:

$params = json_decode(file_get_contents('php://input'),true);

从AngularJS POST访问PHP中的数组。

答案 2 :(得分:76)

您可以像这样设置默认的“Content-Type”:

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

关于data格式:

  

$ http.post和$ http.put方法接受任何JavaScript对象(或字符串)值作为其数据参数。如果data是JavaScript对象,则默认情况下它将转换为JSON字符串。

尝试使用此变体

function sendData($scope) {
    $http({
        url: 'request-url',
        method: "POST",
        data: { 'message' : message }
    })
    .then(function(response) {
            // success
    }, 
    function(response) { // optional
            // failed
    });
}

答案 3 :(得分:56)

我遇到了类似的问题,我想知道这是否也有用:https://stackoverflow.com/a/11443066

var xsrf = $.param({fkey: "key"});
$http({
    method: 'POST',
    url: url,
    data: xsrf,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

此致

答案 4 :(得分:32)

我喜欢使用函数将对象转换为post params。

myobject = {'one':'1','two':'2','three':'3'}

Object.toparams = function ObjecttoParams(obj) {
    var p = [];
    for (var key in obj) {
        p.push(key + '=' + encodeURIComponent(obj[key]));
    }
    return p.join('&');
};

$http({
    method: 'POST',
    url: url,
    data: Object.toparams(myobject),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

答案 5 :(得分:16)

我将jQuery paramAngularJS post请求一起使用。这是一个示例...创建AngularJS应用程序模块,其中myapp在HTML代码中使用ng-app定义。

var app = angular.module('myapp', []);

现在让我们创建一个Login控制器和POST电子邮件和密码。

app.controller('LoginController', ['$scope', '$http', function ($scope, $http) {
    // default post header
    $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
    // send login data
    $http({
        method: 'POST',
        url: 'https://example.com/user/login',
        data: $.param({
            email: $scope.email,
            password: $scope.password
        }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function (data, status, headers, config) {
        // handle success things
    }).error(function (data, status, headers, config) {
        // handle error things
    });
}]);

我不喜欢扩展代码,它很容易理解:)注意param来自jQuery,所以你必须同时安装jQuery和AngularJS才能使它工作。这是一个截图。

enter image description here

希望这有帮助。谢谢!

答案 6 :(得分:9)

我对AngularJS和Node.js + Express 4 +路由器

有同样的问题

路由器期望来自帖子请求的数据在正文中。如果我按照Angular Docs中的示例

,这个主体总是空的

符号1

$http.post('/someUrl', {msg:'hello word!'})

但如果我在数据中使用它

符号2

$http({
       withCredentials: false,
       method: 'post',
       url: yourUrl,
       headers: {'Content-Type': 'application/x-www-form-urlencoded'},
       data: postData
 });

编辑1:

否则node.js路由器将使用req.body中的数据(如果使用符号1:

req.body.msg

其中还将信息作为JSON有效负载发送。在你的json和x-www-form-urlencoded中有数组的情况下,这会更好一些。

它奏效了。希望它有所帮助。

答案 7 :(得分:9)

与JQuery不同,为了迂腐,Angular使用JSON格式进行POST 数据传输从客户端到服务器(JQuery应用x-www-form-urlencoded,尽管JQuery和Angular使用JSON进行数据输入)。因此有两个问题:js客户端部分和服务器部分。所以你需要:

  1. 将js Angular客户端部分放到这样:

    $http({
    method: 'POST',
    url: 'request-url',
    data: {'message': 'Hello world'}
    });
    
    1. 写入您的服务器部分以从客户端接收数据(如果是php)。

              $data               = file_get_contents("php://input");
              $dataJsonDecode     = json_decode($data);
              $message            = $dataJsonDecode->message;
              echo $message;     //'Hello world'
      
    2. 注意:$ _POST不起作用!

      解决方案对我很有帮助,希望和你一起。

答案 8 :(得分:8)

要使用$http angularjs通过Post方法发送数据,您需要更改

data: "message=" + messagedata: $.param({message:message})

答案 9 :(得分:7)

建立@ felipe-miosso的回答:

  1. here
  2. 下载为AngularJS模块
  3. 安装
  4. 将其添加到您的应用程序中:

    var app = angular.module('my_app', [ ... , 'httpPostFix']);
    

答案 10 :(得分:6)

  var payload = $.param({ jobId: 2 });

                this.$http({
                    method: 'POST',
                    url: 'web/api/ResourceAction/processfile',
                    data: payload,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                });

WebAPI 2

public class AcceptJobParams
        {
            public int jobId { get; set; }
        }

        public IHttpActionResult ProcessFile([FromBody]AcceptJobParams thing)
        {
            // do something with fileName parameter

            return Ok();
        }

答案 11 :(得分:6)

我没有评论的声誉,但作为回应/补充Don F的回答:

$params = json_decode(file_get_contents('php://input'));

需要将true的第二个参数添加到json_decode函数中才能正确返回关联数组:

$params = json_decode(file_get_contents('php://input'), true);

答案 12 :(得分:5)

此代码为我解决了这个问题。这是一个应用程序级解决方案:

moduleName.config(['$httpProvider',
  function($httpProvider) {
    $httpProvider.defaults.transformRequest.push(function(data) {
        var requestStr;
        if (data) {
            data = JSON.parse(data);
            for (var key in data) {
                if (requestStr) {
                    requestStr += "&" + key + "=" + data[key];
                } else {
                    requestStr = key + "=" + data[key];
                }
            }
        }
        return requestStr;
    });
    $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
  }
]);

答案 13 :(得分:5)

在js文件中添加:

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

并将其添加到您的服务器文件中:

$params = json_decode(file_get_contents('php://input'), true);

这应该有效。

答案 14 :(得分:4)

就我而言,我解决了这样的问题:

var deferred = $q.defer();

$http({
    method: 'POST',
    url: 'myUri', 
    data: $.param({ param1: 'blablabla', param2: JSON.stringify(objJSON) }),
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(
    function(res) {
        console.log('succes !', res.data);
        deferred.resolve(res.data);
    },
    function(err) {
        console.log('error...', err);
        deferred.resolve(err);
    }
);
return deferred.promise;

您需要对包含JSON对象的每个param使用JSON.stringify,然后使用“$ .param”构建数据对象: - )

注意:我的“objJSON”是一个包含数组,整数,字符串和html内容的JSON对象。他的总大小不超过3500个字符。

答案 15 :(得分:4)

我也面临类似的问题,我正在做这样的事情,但没有奏效。我的Spring控制器无法读取数据参数。

var paramsVal={data:'"id":"1"'};
  $http.post("Request URL",  {params: paramsVal});  

但是阅读这个论坛和API Doc,我尝试了以下方式,这对我有用。 如果有人也有类似的问题,你也可以尝试以下方式。

$http({
      method: 'POST',
      url: "Request URL",           
      params: paramsVal,
      headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}
            });

请查看https://docs.angularjs.org/api/ng/service/ $ http#post以了解param配置的功能。 {data:'“id”:“1”'} - 将转换为网址的字符串或对象的地图?data =“id:1”

答案 16 :(得分:4)

这可能是一个迟到的答案,但我认为最合适的方法是在进行&#34; get&#34;时使用相同的代码角度。使用$httpParamSerializer的请求必须将其注入您的控制器 所以你可以简单地执行以下操作而不必使用Jquery, $http.post(url,$httpParamSerializer({param:val}))

app.controller('ctrl',function($scope,$http,$httpParamSerializer){
    $http.post(url,$httpParamSerializer({param:val,secondParam:secondVal}));
}

答案 17 :(得分:3)

我在express中有同样的问题..解决你必须使用bodyparser解析json对象才发送http请求..

app.use(bodyParser.json());

答案 18 :(得分:3)

类似于OP的建议工作格式&amp;丹尼森的回答,除了使用$http.post而不仅仅是$http,仍然依赖于jQuery。

在这里使用jQuery的好处是复杂的对象可以正常传递;反对手动转换为可能使数据混乱的URL参数。

$http.post( 'request-url', jQuery.param( { 'message': message } ), {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});

答案 19 :(得分:3)

如果使用 Angular&gt; = 1.4 ,这是使用the serializer provided by Angular的最干净的解决方案:

angular.module('yourModule')
  .config(function ($httpProvider, $httpParamSerializerJQLikeProvider){
    $httpProvider.defaults.transformRequest.unshift($httpParamSerializerJQLikeProvider.$get());
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';
});

然后您可以在应用中的任何位置执行此操作:

$http({
  method: 'POST',
  url: '/requesturl',
  data: {
    param1: 'value1',
    param2: 'value2'
  }
});

它会将数据正确序列化为param1=value1&param2=value2并将其发送到/requesturl,并使用application/x-www-form-urlencoded; charset=utf-8 Content-Type标头,因为它通常在端点上使用POST请求。

<强> TL; DR

在我的研究过程中,我发现这个问题的答案有很多不同的风格;有些是非常复杂的,依赖于自定义函数,有些依赖于jQuery,有些不完整,建议你只需要设置标题。

如果您只设置Content-Type标题,则结束点会看到POST数据,但它不会采用标准格式,因为除非您提供字符串作为data,或手动序列化您的数据对象,默认情况下它们都将被序列化为JSON,并且可能在端点处被错误地解释。

e.g。如果在上面的示例中未设置正确的序列化程序,则会在端点中看到:

{"param1":"value1","param2":"value2"}

这会导致意外的解析,例如ASP.NET将其视为null参数名称,其中{"param1":"value1","param2":"value2"}为值;或者Fiddler以另一种方式解释它,{"param1":"value1","param2":"value2"}作为参数名称,null作为值。

答案 20 :(得分:3)

如果您使用PHP,这是一种从AngularJS POST访问PHP数组的简单方法。

$params = json_decode(file_get_contents('php://input'),true);

答案 21 :(得分:3)

没有找到如何使用$ http.post方法向服务器发送数据的完整代码段以及在这种情况下它无法正常工作的原因。

以下代码段的解释......

  1. 我使用jQuery $ .param函数将JSON数据序列化为www post data
  2. 在config变量中设置Content-Type,该变量将与angularJS $ http.post的请求一起传递,该请求指示服务器我们以www post格式发送数据。

  3. 注意$ htttp.post方法,我将第一个参数作为url发送,第二个参数作为数据(序列化)发送,第三个参数作为config发送。

  4. 剩下的代码是自我理解的。

    $scope.SendData = function () {
               // use $.param jQuery function to serialize data from JSON 
                var data = $.param({
                    fName: $scope.firstName,
                    lName: $scope.lastName
                });
    
                var config = {
                    headers : {
                        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                    }
                }
    
                $http.post('/ServerRequest/PostDataResponse', data, config)
                .success(function (data, status, headers, config) {
                    $scope.PostDataResponse = data;
                })
                .error(function (data, status, header, config) {
                    $scope.ResponseDetails = "Data: " + data +
                        "<hr />status: " + status +
                        "<hr />headers: " + header +
                        "<hr />config: " + config;
                });
            };
    

    查看$http.post method here的代码示例。

答案 22 :(得分:3)

我知道 已接受 回答。但是,如果答案因任何原因不适合他们,以下可能对未来读者有所帮助。

Angular不会像jQuery那样执行ajax。虽然我尝试按照指南修改角度$httpprovider,但我遇到了其他问题。例如。我使用codeigniter,其中$this->input->is_ajax_request()函数总是失败(由另一个程序员编写并全局使用,因此无法更改)说这不是真正的ajax请求。

为了解决这个问题,我接受了deferred promise的帮助。我在Firefox中测试了它,ie9并且它有效。

我有以下功能定义 任何角度代码。这个函数定期进行jquery ajax调用,并返回deferred / promise(我还在学习)对象。

function getjQueryAjax(url, obj){
    return $.ajax({
        type: 'post',
        url: url,
        cache: true,
        data: obj
    });
}

然后我使用以下代码将其称为角度代码。请注意,我们必须使用$scope手动更新$scope.$apply()

    var data = {
        media: "video",
        scope: "movies"
    };
    var rPromise = getjQueryAjax("myController/getMeTypes" , data);
    rPromise.success(function(response){
        console.log(response);
        $scope.$apply(function(){
            $scope.testData = JSON.parse(response);
            console.log($scope.testData);
        });
    }).error(function(){
        console.log("AJAX failed!");
    });

这可能不是一个完美的答案,但它允许我使用带有角度的jquery ajax调用,并允许我更新$scope

答案 23 :(得分:3)

  

我正在使用带有角度js和代码的asp.net WCF webservices   工作:

 $http({
        contentType: "application/json; charset=utf-8",//required
        method: "POST",
        url: '../../operation/Service.svc/user_forget',
        dataType: "json",//optional
        data:{ "uid_or_phone": $scope.forgettel, "user_email": $scope.forgetemail },
        async: "isAsync"//optional

       }).success( function (response) {

         $scope.userforgeterror = response.d;                    
       })

希望它有所帮助。

答案 24 :(得分:2)

我已经使用了已接受的答案代码(Felipe的代码)一段时间了,并且工作得很好(谢谢,菲利普!)。

但是,最近我发现它存在空对象或数组的问题。 例如,提交此对象时:

{
    A: 1,
    B: {
        a: [ ],
    },
    C: [ ],
    D: "2"
}

PHP似乎根本看不到B和C.它得到了这个:

[
    "A" => "1",
    "B" => "2"
]

查看Chrome中的实际请求会显示:

A: 1
:
D: 2

我写了一个替代代码段。它似乎与我的用例很好用,但我还没有对它进行过广泛的测试,所以谨慎使用。

我使用的是TypeScript,因为我喜欢强类型,但很容易转换为纯JS:

angular.module("MyModule").config([ "$httpProvider", function($httpProvider: ng.IHttpProvider) {
    // Use x-www-form-urlencoded Content-Type
    $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";

    function phpize(obj: Object | any[], depth: number = 1): string[] {
        var arr: string[] = [ ];
        angular.forEach(obj, (value: any, key: string) => {
            if (angular.isObject(value) || angular.isArray(value)) {
                var arrInner: string[] = phpize(value, depth + 1);
                var tmpKey: string;
                var encodedKey = encodeURIComponent(key);
                if (depth == 1) tmpKey = encodedKey;
                else tmpKey = `[${encodedKey}]`;
                if (arrInner.length == 0) {
                    arr.push(`${tmpKey}=`);
                }
                else {
                    arr = arr.concat(arrInner.map(inner => `${tmpKey}${inner}`));
                }
            }
            else {
                var encodedKey = encodeURIComponent(key);
                var encodedValue;
                if (angular.isUndefined(value) || value === null) encodedValue = "";
                else encodedValue = encodeURIComponent(value);

                if (depth == 1) {
                    arr.push(`${encodedKey}=${encodedValue}`);
                }
                else {
                    arr.push(`[${encodedKey}]=${encodedValue}`);
                }
            }
        });
        return arr;
    }

    // Override $http service's default transformRequest
    (<any>$httpProvider.defaults).transformRequest = [ function(data: any) {
        if (!angular.isObject(data) || data.toString() == "[object File]") return data;
        return phpize(data).join("&");
    } ];
} ]);

它的效率低于Felipe的代码,但我认为它不重要,因为与HTTP请求本身的总体开销相比,它应该立即生效。

现在PHP显示:

[
    "A" => "1",
    "B" => [
        "a" => ""
    ],
    "C" => "",
    "D" => "2"
]

据我所知,不可能让PHP认识到Ba和C是空数组,但至少出现了键,这在依赖于a的代码时非常重要。某种结构,即使它基本上是空的。

另请注意,它会将 undefined null 转换为空字符串。

答案 25 :(得分:2)

当我遇到这个问题时,我发布的参数被证明是一个对象数组而不是一个简单的对象。

答案 26 :(得分:1)

只需将您要发送的数据作为第二个参数:

$http.post('request-url',  message);

另一种有效的形式是:

$http.post('request-url',  { params: { paramName: value } });

确保paramName与您正在呼叫的功能的参数名称完全匹配。

来源:AngularJS post shortcut method

答案 27 :(得分:1)

这不是角度的错。 Angular旨在在JSON世界中工作。因此,当$ http服务发送AJAX请求时,它会将所有数据作为有效负载发送,而不是作为表单数据发送,以便后端应用程序可以处理它。但是jQuery在内部做了一些事情。您指示jQuery的$ ajax模块将表单数据绑定为JSON,但在发送AJAX请求之前,它序列化了JSON并添加了application/x-www-form-urlencoded标头。这样,您的后端应用程序能够以post参数的形式接收表单数据,而不是JSON。

但您可以通过

修改角度$ http服务的默认行为
  1. 添加标题
  2. 序列化json
  3. $ httpParamSerializerJQLike是angular的内置服务,它以与.JQuery的$ .param相同的方式序列化json。

    $http({
        method: 'POST',
        url: 'request-url',
        data: $httpParamSerializerJQLike(json-form-data),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8;'
        }
    });
    

    如果您需要一个插件来首先将表单数据序列化为JSON,请使用此https://github.com/marioizquierdo/jquery.serializeJSON

答案 28 :(得分:1)

我通过以下代码解决了这个问题:

客户端(Js):

     $http({
                url: me.serverPath,
                method: 'POST',
                data: data,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            }).
                success(function (serverData) {
                    console.log("ServerData:", serverData);
    ......

注意数据是一个对象。

在服务器上(ASP.NET MVC):

[AllowCrossSiteJson]
        public string Api()
        {
            var data = JsonConvert.DeserializeObject<AgentRequest>(Request.Form[0]);
            if (data == null) return "Null Request";
            var bl = Page.Bl = new Core(this);

            return data.methodName;
        }
跨域请求需要

和'AllowCrossSiteJsonAttribute':

public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
            base.OnActionExecuting(filterContext);
        }
    }

希望这很有用。

答案 29 :(得分:0)

我写了一个小的 PHP辅助函数,它允许两种类型的输入参数:

function getArgs () {
    if ($input = file_get_contents('php://input') && $input_params = json_decode($input,true))
        return $input_params + $_POST + $_GET;
    return $_POST + $_GET;
}

用法:

<?php
    include("util.php"); # above code
    $request = getArgs();

    $myVar = "";
    if (isset($request['myVar']))
        $myVar = $request['myVar'];
?>

因此,您的JavaScript无需更改。

答案 30 :(得分:0)

用这种方式。不需要写那么多

 isAuth = $http.post("Yr URL", {username: username, password: password});

并在nodejs后端

app.post("Yr URL",function(req,resp)
{

  var username = req.body.username||req.param('username');
  var password = req.body.password||req.param('password');
}

我希望这会有所帮助

答案 31 :(得分:0)

通过使用非常简单的方法,我们可以遵循:

 $http({
        url : "submit_form_adv.php",
        method : 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        transformRequest: function(obj) {
            var str = [];
            for(var p in obj)
                str.push(encodeURIComponent(p)+' = '+encodeURIComponent(obj[p]));

            return str.join('&');
        },
        data : {sample_id : 100, sample_name: 'Abin John'},

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

    }).error(function(ata, status, headers, config) {

    });

答案 32 :(得分:0)

上找到了简单的解决方案

http://jasonwatmore.com/post/2014/04/18/post-a-simple-string-value-from-angularjs-to-net-web-api

return $http.post(Config.apiUrl + '/example/processfile', '"' + fileName + '"');

答案 33 :(得分:0)

刚刚提出@FelipeMiosso's answer的现代化版本:

.config(["$httpProvider", function ($httpProvider) {

  function buildKey(parentKey, subKey) {
    return parentKey + "[" + subKey + "]";
  }

  function buildObject(key, value) {
    var object = {};
    object[key] = value;
    return object;
  }

  function join(array) {
    return array.filter(function (entry) {
      return entry;
    }).join("&");
  }

  function arrayToQueryString(parentKey, array) {
    return join(array.map(function (value, subKey) {
      return toQueryString(buildObject(buildKey(parentKey, subKey), value));
    }));
  }

  function objectToQueryString(parentKey, object) {
    return join(Object.keys(object).map(function (subKey) {
      return toQueryString(buildObject(buildKey(parentKey, subKey), object[subKey]));
    }));
  }

  function toQueryString(input) {
    return join(Object.keys(input).map(function (key) {
      var value = input[key];
      if (value instanceof Array) {
        return arrayToQueryString(key, value);
      } else if (value instanceof Object) {
        return objectToQueryString(key, value);
      } else if (undefined !== value && null !== value) {
        return encodeURIComponent(key) + "=" + encodeURIComponent(value);
      } else {
        return "";
      }
    }));
  }

  function isQueryStringEligible(input) {
    return null !== input && "object" === typeof input && "[object File]" !== String(input);
  }

  var interceptor = [function () {
    return {
      request: function (config) {
        if (0 <= ["post", "put", "patch"].indexOf(config.method.toLowerCase()) && isQueryStringEligible(config.data)) {
          config.headers["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";
          config.data = toQueryString(config.data);
        }
        return config;
      }
    };
  }];

  $httpProvider.interceptors.push(interceptor);

}])

ES6版本:

.config(["$httpProvider", function ($httpProvider) {

  "use strict";

  const buildKey = (parentKey, subKey) => `${parentKey}[${subKey}]`;

  const buildObject = (key, value) => ({ [key]: value });

  const join = (array) => array.filter((entry) => entry).join("&");

  const arrayToQueryString = (parentKey, array) =>
    join(array.map((value, subKey) =>
      toQueryString(buildObject(buildKey(parentKey, subKey), value))));

  const objectToQueryString = (parentKey, object) =>
    join(Object.keys(object).map((subKey) =>
      toQueryString(buildObject(buildKey(parentKey, subKey), object[subKey]))));

  const toQueryString = (input) => join(Object.keys(input).map((key) => {
    const value = input[key];
    if (value instanceof Array) {
      return arrayToQueryString(key, value);
    } else if (value instanceof Object) {
      return objectToQueryString(key, value);
    } else if (undefined !== value && null !== value) {
      return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
    } else {
      return "";
    }
  }));

  const isQueryStringEligible = (input) =>
    null !== input && "object" === typeof input && "[object File]" !== String(input);

  const interceptor = [() => ({
    request(config) {
      if (0 <= ["post", "put", "patch"].indexOf(config.method.toLowerCase()) && isQueryStringEligible(config.data)) {
        config.headers["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";
        config.data = toQueryString(config.data);
      }
      return config;
    }
  })];

  $httpProvider.interceptors.push(interceptor);

}])

答案 34 :(得分:0)

我遇到了这个问题,问题是我在使用上述标题发帖时无法获取数据,即

headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded'
}

在使用jquery Ajax的时候,我们通常会在后端服务器上的 response.body 中获取数据,但是在实现Angular ajax的时候,数据并没有响应。而是在它下面

request.getParameterMap.keySet().iterator().next()