Angular $ resource服务在Form Data中发送数据而不是Request Payload

时间:2016-08-18 10:02:19

标签: javascript jquery angularjs ajax forms

我正面临角$资源服务的问题。

我正试图以不同的方式使用某些表单数据来访问REST API。

但每次我点击API时,我最终都会在QueryParams或Request Payload中发送数据。

我实际上需要以编码格式发送数据。

我的代码如下所示:

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


var save = function (url, params, headers, successcb, successParams, errorcb, errorParams) {
            var promise = $resource(url, null, {
                upload: {
                    method: methodPost,
                    headers: headers
                }
            }).save({}, params).$promise;

            promise.then(function (response) {
                successcb(response.data, successParams);
            }, function (error) {
                errorcb(error, errorParams);
            });
        };

我附上了角度ajax请求的快照。

enter image description here

参考上面的图片,虽然我已经设置了x-www-form-urlencoded,但内容类型实际上显示的是application / json。因此,数据将在RequestPayload而不是FormData中出现。

下面是另一个jQuery ajax调用的图片。

enter image description here

在这里,你可以清楚地看到内容类型是x-www-form-urlencoded并且工作正常。

我的疑问是,$ resource没有发送正确的标题,因为数据以RequestPayload的形式发送。

有没有人面对这个问题?

感谢任何帮助。

由于

2 个答案:

答案 0 :(得分:0)

您可以使用转换请求,如下所示。

var transform = function(data) {
        return $.param(data);
    }

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

    var save = function(url, params, headers, successcb, successParams, errorcb, errorParams) {
        var promise = $resource(url, null, {
            upload : {
                method : methodPost,
                headers : headers,
                transformRequest : transform

            }
        }).save({}, params).$promise;

        promise.then(function(response) {
            successcb(response.data, successParams);
        }, function(error) {
            errorcb(error, errorParams);
        });
    };

答案 1 :(得分:0)

这是因为transformRequest服务$http中的$resouce方法取决于始终将Content-Type标头设置为application/json

要解决此问题,您需要将其禁用或更改为使用将规格设置为您想要的功能。

这里有好文章:http://www.bennadel.com/blog/2615-posting-form-data-with-http-in-angularjs.htm

尝试:

var promise = $resource(url, null, {
    upload: {
        method: methodPost,
        headers: headers,
        transformRequest: []        
    },
}).save({}, params).$promise;