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


337

谁能告诉我为什么下面的语句不将发布数据发送到指定的URL?调用了url,但是在打印$ _POST时在服务器上-我得到一个空数组。如果我在将消息添加到数据之前在控制台中打印消息-它显示正确的内容。

$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对象发送吗?


网址是同一来源吗?
fmquaglia

对不起-是所有例子是相同的URL
斯宾塞马克

@SpencerMark对不起..我尝试了您的工作代码之上..它对我不起作用。
Arul Sidthan

Answers:


345

我在使用asp.net MVC时遇到了同样的问题,并在这里找到了解决方案

AngularJS的新手之间有很多困惑,即为什么 $http服务速记函数($http.post()等)似乎无法与jQuery等价物(jQuery.post()等)互换

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

Content-Type: x-www-form-urlencoded

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

但是,AngularJS使用以下命令传输数据

Content-Type: application/json 

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

不幸的,JSON序列化不会对某些Web服务器语言(特别是PHP)进行本机反序列化。

奇迹般有效。

// 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;
  }];
});

7
我已经将此脚本bower install angular-post-fix --save-dev添加到Bower,用于添加它。
比利·布拉兹

所以有一种方法可以改变php的传输数据方法。因为那是我目前遇到的问题。
Demodave

1
该代码在大多数情况下都很好用,但是在提交空对象甚至平坦的空值的层次结构时,我遇到了问题。例如,{a:1,b:{c:{d:{}}},e:未定义,f:空,g:2}将无法正确编码,PHP将其获取为[“ a” = >“ 1”,“ g” =>“ 2”]。“ b”下的整个结构以及“ e”和“ f”下的整个结构,包括密钥本身,都将丢失。我在下面发布了替代代码,上面的结构被解码为:[“ a” =>“ 1”,“ b” => [“ c” => [“ d” =>“”]],“ e” =>“”,“ f” =>“”,“ g” =>“ 2”]。
obe

1
如何为multipart / form-data实现此功能?
davidlee,2015年

精湛的:)确实像一个魅力。我遇到了Spring MVC的问题
SKaul '16

115

上面不是很清楚,但是如果您使用PHP接收请求,则可以使用:

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

从AngularJS POST访问PHP中的数组。


3
我需要添加true,以在覆盖$ _POST数组时将其强制到数组。json_decode(file_get_contents('php://input'), true);
2015年

4
@Zalaboza,我同意很难将任何解决方案视为“通用”,但我不同意它是“ hacky”的--- php.net指出:“ file_get_contents()是读取内容的首选方式将文件转换为字符串。如果操作系统支持,它将使用内存映射技术来提高性能。” 授予我们在这种情况下不读取文件,但是我们仍在读取发布的json数据。如果您可以提供一个新的答案或提供新的信息来帮助读者(包括我自己)对此做出更好的决定,那就太好了。
Don F

78

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

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

关于data格式:

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

尝试使用此变体

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

9
它似乎不起作用。我刚刚尝试了将数据作为字符串和:header:{'Content-Type':'application / x-www-form-urlencoded'}的变体-似乎可行,但是有一种更好的方法它?
斯潘塞·马克

2
如上所述设置默认的内容类型,对于数据不要使用js对象。使用像这样的字符串:'message ='+ message Works for me
gSorry 2015年


33

我喜欢使用一个函数将对象转换为发布参数。

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'}
})


19

我在AngularJS post requrest中使用jQuery param。这是一个示例...创建AngularJS应用程序模块,该模块在HTML代码中定义。myappng-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才能使其正常工作。这是截图。

在此处输入图片说明

希望这会有所帮助。谢谢!


10

我在AngularJS和Node.js + Express 4 + Router上遇到了相同的问题

路由器在正文中期望来自发布请求的数据。如果我按照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:

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

req.body.msg

它还将信息作为JSON有效负载发送。在某些情况下,当您在json中有数组并且x-www-form-urlencoded会带来一些问题时,这会更好。

有效。希望能帮助到你。


10

与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'

注意:$ _POST将不起作用!

该解决方案对我很好,希望对您有效。


8

要通过与$httpangularjs的Post方法发送数据,您需要进行更改

data: "message=" + message,带有 data: $.param({message:message})


1
为什么在发送AngularJS发布数据时需要data:$ .param?
蓝天

7

以@ felipe-miosso的答案为基础:

  1. 此处将其下载为AngularJS模块,
  2. 安装它
  3. 将其添加到您的应用程序:

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

6

我没有发表评论的名声,但是作为对Don F的回答/补充:

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

true需要在json_decode函数中添加第二个参数,以正确返回关联数组:

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


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

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

5

将此添加到您的js文件中:

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

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

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

那应该工作。


4

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

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

但是,阅读此论坛和API文档后,我尝试了以下方法,这对我有用。如果有人也有类似的问题,您也可以尝试以下方式。

$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以了解参数配置的作用。{data:'“ id”:“ 1”'} –要转换为URL的字符串或对象的映射?data =“ id:1”


4

这可能是一个较晚的答案,但是我认为最正确的方法是在使用“ get”请求时使用相同的代码角度用法,$httpParamSerializer必须将其注入到控制器中,这样您就可以简单地执行以下操作而不必完全使用Jquery, $http.post(url,$httpParamSerializer({param:val}))

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

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对象的参数使用JSON.stringify,然后使用“ $ .param”来构建数据对象:-)

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


3

我知道已经接受了答案。但是,如果答案由于某种原因不适合他们,那么关注可能对将来的读者有所帮助。

Angular与jQuery的ajax不同。当我尝试按照指南修改angular时$httpprovider,遇到了其他问题。例如,我使用codeigniter,其中$this->input->is_ajax_request()函数总是失败(它是由另一个程序员编写并在全局范围内使用的,因此无法更改),它说这不是真正的ajax请求。

为了解决这个问题,我采取了延期的承诺。我在Firefox和ie9中对其进行了测试,并且可以正常工作。

任何角度代码之外定义了以下函数。该函数进行常规的jquery ajax调用并返回延迟/承诺(我仍在学习中)的对象。

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

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


2
Angular从1.3开始就有自己的承诺服务,称为$ q。无需在帖子中使用JQuery。
mbokil '16

3

我在表达..时遇到了同样的问题,以解决您在发送http请求之前必须使用bodyparser解析json对象的问题。

app.use(bodyParser.json());

3

我正在使用带角度js的asp.net WCF Web服务和以下代码正常工作:

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

希望能帮助到你。


3

找不到有关如何使用$ http.post方法将数据发送到服务器的完整代码片段,以及在这种情况下为什么它不起作用。

以下代码段的说明...

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

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

其余代码是可以理解的。

$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方法的代码示例。



3

如果使用Angular> = 1.4,这是使用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-8Content-Type标头将其发送到端点,这通常是端点上的POST请求所期望的。

TL; DR

在研究过程中,我发现此问题的答案来自许多不同的方面。有些非常复杂,并且依赖于自定义函数,有些依赖于jQuery,而有些则不完整,提示您只需要设置标头即可。

如果仅设置Content-Type标头,则端点将看到POST数据,但它不会采用标准格式,因为除非您提供字符串作为data,或手动序列化数据对象,否则所有这些都将通过JSON序列化为JSON。默认值,并且可能在端点上被错误解释。

例如,如果在以上示例中未设置正确的序列化器,则在端点中将其视为:

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

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


3

与OP建议的工作格式和Denison的答案类似,不同之处$http.post在于,使用而不是just $http仍然依赖jQuery。

在这里使用jQuery的好处是,可以正确传递复杂的对象。反对将其手动转换为可能会使数据乱码的URL参数。

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

2

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


2

刚从angular 1.2更新到1.3,在代码中发现了问题。转换资源将导致无限循环,因为(我认为)$ promise再次持有相同的对象。也许会帮助某人...

我可以通过以下方法解决此问题:

[...]
  /**
 * 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;

angular.forEach(obj, function(value, name) {
+    if(name.indexOf("$promise") != -1) {
+        return;
+    }

    value = obj[name];
    if (value instanceof Array) {
        for (i = 0; i < value.length; ++i) {
[...]

2

我已经使用可接受的答案的代码(Felipe的代码)已有一段时间了,而且效果很好(谢谢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是空数组,但至少会出现键,这在存在依赖于某种结构的代码(即使其内部基本为空)时很重要。

另请注意,它将undefinednull转换为空字符串。


TypeScript是使用JavaScript在POO中进行编码的最佳方法!
毁容

2

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

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

另一种有效的形式是:

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

确保 paramName与您正在调用的函数的参数名称完全匹配。

来源:AngularJS发布快捷方式


5
谁能解释为什么这个答案被否决了?
Marco Lackovic '16

1
这种解决方案是不可能被否决的,它是角度文档docs.angularjs.org/api/ng/service/$http中
ainasiart

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

希望这是有用的。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.