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

Question

谁能告诉我为什么以下声明不会将发布数据发送到指定的网址？当我打印$ _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对象发送吗？

Answer 1

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

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 -本身没有反序列化.

奇迹般有效.

码

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

Answer 2

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

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

从AngularJS POST访问PHP中的数组.

Answer 3

您可以像这样设置默认的"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
    });
}

Answer 4

我有一个类似的问题,我想知道这是否也有用: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'}
})

问候,

Answer 5

我喜欢使用函数将对象转换为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'}
})

Answer 6

最后使用$ httpParamSerializerJQLike在角度1.4中解决了这个问题

请参阅https://github.com/angular/angular.js/issues/6039

.controller('myCtrl', function($http, $httpParamSerializerJQLike) {
$http({
  method: 'POST',
  url: baseUrl,
  data: $httpParamSerializerJQLike({
    "user":{
      "email":"wahxxx@gmail.com",
      "password":"123456"
    }
  }),
  headers:
    'Content-Type': 'application/x-www-form-urlencoded'
})})

Answer 7

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

希望这是有帮助的.谢谢!

Answer 8

我对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中有数组的某些情况下,这会更好.

有效.希望能帮助到你.

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

和

2. 写入您的服务器部分以从客户端接收数据(如果它是php).

           $data               = file_get_contents("php://input");
           $dataJsonDecode     = json_decode($data);
           $message            = $dataJsonDecode->message;
           echo $message;     //'Hello world'
   

注意:$ _POST不起作用!

解决方案对我来说很好,希望和你.

Answer 10

要通过带有$httpangularjs的Post方法发送数据,您需要更改

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

Answer 11

建立@ felipe-miosso的答案:

1. 从这里下载它作为AngularJS模块,
2. 安装它

3. 将其添加到您的应用程序:

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

Answer 12

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

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

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

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

Answer 13

角

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

Answer 14

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

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

Answer 15

在你的js文件中添加:

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

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

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

这应该工作.

Answer 16

就我而言，我这样解决问题：

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”是一个包含数组、整数、字符串和 html 内容的 JSON 对象。他的总大小超过 3500 个字符。