Rectangle 27 0

javascript AngularJS Any way for $http.post to send request parameters instead of JSON?


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

    $http.post("/foo/bar", requestData, {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
        transformRequest: transform
    }).success(function(responseData) {
        //do stuff with response
    });
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
var app = angular.module('myApp');

app.config(function ($httpProvider) {
    $httpProvider.defaults.transformRequest = function(data){
        if (data === undefined) {
            return data;
        }
        return $.param(data);
    }
});

@kshep92 What is happening is that the transformRequest function is getting called on a request with no data so 'data' is undefined. I added a guard prior to 'return $.param(data);'. Insert this as the first line to the transformRequest function: 'if (data === undefined) return data;' See the edit I made to the answer.

I think the params config parameter won't work here since it adds the string to the url instead of the body but to add to what Infeligo suggested here is an example of the global override of a default transform (using jQuery param as an example to convert the data to param string).

I was wondering if there was something other than having a transformRequest function, but it sounds like there's not. Thanks for heads up about the jQuery param function.

In the local case, transformRequest erases the ones that Angular normally does right. In the non-global transformRequest how would one unshift or pull the function instead of over-writing?

Non-global per call method is working well for me, but when trying to set up globally via $httpProvider.defaults, then it not working, any clue about this ?

Note you may also want to set the Content-Type header per call or globally like this:

That way all calls to $http.post will automatically transform the body to the same param format used by the jQuery $.post call.

WRT configuring it globally, I too am having issues. When I try to do it using the snippet given here, I get an error Cannot read property "jquery" of undefined. How do I fix this? PS. Per-call transformations work.

Note
Rectangle 27 0

javascript AngularJS Any way for $http.post to send request parameters instead of JSON?


$http({
  method: 'POST',
  url: '/requesturl',
  data: {
    param1: 'value1',
    param2: 'value2'
  }
});
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';
});

And it will correctly serialize the data as param1=value1&param2=value2 and send it to /requesturl with the application/x-www-form-urlencoded; charset=utf-8 Content-Type header as it's normally expected with POST requests on endpoints.

And then you can do this anywhere in your app:

If using Angular >= 1.4, here's the cleanest solution I've found that doesn't rely on anything custom or external:

This should be the correct answer.

Note
Rectangle 27 0

javascript AngularJS Any way for $http.post to send request parameters instead of JSON?


$http({
    method: 'POST',
    url: myUrl',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: myData
});
module.run(function($http, $httpParamSerializerJQLike) {
  $http.defaults.transformRequest.unshift($httpParamSerializerJQLike);
});

I just implemented this and it resolves issues I was having with post, but this also changes how patch works and appears to have broken all of my uses of $http.patch().

Note that as of Angular 1.4, you can serialize the form data without using jQuery.

Then in your controller:

This answer is great. It addresses the 2 main problems with Post from Angular. The header must be set correctly and you have to serialize the json data. If you don't need IE8 support use 1.4+ or later.

Note
Rectangle 27 0

javascript AngularJS Any way for $http.post to send request parameters instead of JSON?


$.param
$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";
var payload = $.param({key: value});
$http.post(targetURL, payload);
Note
Rectangle 27 0

javascript AngularJS Any way for $http.post to send request parameters instead of JSON?


$_POST
$http.post
Note
Rectangle 27 0

javascript AngularJS Any way for $http.post to send request parameters instead of JSON?


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

I've used this method, but I hate it; and took me a long time to figure out why I had to use this.

This might be a bit of a hack, but I avoided the issue and converted the json into PHP's POST array on the server side:

like I said - it feels hacky. Like most of php ;)

Note
Rectangle 27 0

javascript AngularJS Any way for $http.post to send request parameters instead of JSON?


$httpProvider.defaults.transformRequest = function(data) {
        return data != undefined ? $.param(data) : null;
    }

Quick adjustment - for those of you having trouble with the global configuration of the transformRequest function, here's the snippet i'm using to get rid of the Cannot read property 'jquery' of undefined error:

Note
Rectangle 27 0

javascript AngularJS Any way for $http.post to send request parameters instead of JSON?


I saw the params in the documentation, and like Gloopy mentions, I need it in the body, and not on the URL. I was wondering if there was some option or something I was missing to do the parameters instead of JSON, but it sounds like I just need to use the transformRequest property.

So, provide string as parameters. If you don't want that, then use transformations. Again, from the documentation:

To override these transformation locally, specify transform functions as transformRequest and/or transformResponse properties of the config object. To globally override the default transforms, override the $httpProvider.defaults.transformRequest and $httpProvider.defaults.transformResponse properties of the $httpProvider.

params {Object.} Map of strings or objects which will be turned to ?key1=value1&key2=value2 after the url. If the value is not a string, it will be JSONified.

Note
Rectangle 27 0

javascript AngularJS Any way for $http.post to send request parameters instead of JSON?


$httpProvider.defaults.transformRequest = function(data) {
        return data != undefined ? $.param(data) : null;
    }

Quick adjustment - for those of you having trouble with the global configuration of the transformRequest function, here's the snippet i'm using to get rid of the Cannot read property 'jquery' of undefined error:

Note