Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJs $http.post() does not send data

Could anyone tell me why the following statement does not send the post data to the designated url? The url is called but on the server when I print $_POST - I get an empty array. If I print message in the console before adding it to the data - it shows the correct content.

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

I've also tried it with the data as string (with the same outcome):

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

It seem to be working when I use it in the following format:

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

but is there a way of doing it with the $http.post() - and do I always have to include the header in order for it to work? I believe that the above content type is specifying format of the sent data, but can I send it as javascript object?

like image 823
Spencer Mark Avatar asked Oct 08 '13 17:10

Spencer Mark


People also ask

What do the services represent in AngularJS What are directives?

Service in AngularJS is a function or an object that can be used to share data and the behaviour across the application (controller, directives, filters, other services etc.) or we can say services in AngularJS are objects that are wired together using DI (dependency injection) and it can be used to share and organize ...


2 Answers

I had the same problem using asp.net MVC and found the solution here

There is much confusion among newcomers to AngularJS as to why the $http service shorthand functions ($http.post(), etc.) don’t appear to be swappable with the jQuery equivalents (jQuery.post(), etc.)

The difference is in how jQuery and AngularJS serialize and transmit the data. Fundamentally, the problem lies with your server language of choice being unable to understand AngularJS’s transmission natively ... By default, jQuery transmits data using

Content-Type: x-www-form-urlencoded 

and the familiar foo=bar&baz=moe serialization.

AngularJS, however, transmits data using

Content-Type: application/json  

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

JSON serialization, which unfortunately some Web server languages—notably PHP—do not unserialize natively.

Works like a charm.

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;   }]; }); 
like image 80
Felipe Miosso Avatar answered Sep 20 '22 14:09

Felipe Miosso


It's not super clear above, but if you are receiving the request in PHP you can use:

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

To access an array in PHP from an AngularJS POST.

like image 32
Don F Avatar answered Sep 19 '22 14:09

Don F