How do I POST urlencoded form data with $http without jQuery?

I think you need to do is to transform your data from object not to JSON string, but to url params.

From Ben Nadel's blog.

By default, the $http service will transform the outgoing request byserializing the data as JSON and then posting it with the content-type, "application/json". When we want to post the value as a FORMpost, we need to change the serialization algorithm and post the datawith the content-type, "application/x-www-form-urlencoded".

Example from here.

$http({    method: 'POST',    url: url,    headers: {'Content-Type': 'application/x-www-form-urlencoded'},    transformRequest: function(obj) {        var str = [];        for(var p in obj)        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));        return str.join("&");    },    data: {username: $scope.userName, password: $scope.password}}).then(function () {});

UPDATE

To use new services added with AngularJS V1.4, see

• URL-encoding variables using only AngularJS services

URL-encoding variables using only AngularJS services

With AngularJS 1.4 and up, two services can handle the process of url-encoding data for POST requests, eliminating the need to manipulate the data with transformRequest or using external dependencies like jQuery:

1. $httpParamSerializerJQLike - a serializer inspired by jQuery's .param() (recommended)

2. $httpParamSerializer - a serializer used by Angular itself for GET requests

Example with $http()

$http({  url: 'some/api/endpoint',  method: 'POST',  data: $httpParamSerializerJQLike($scope.appForm.data), // Make sure to inject the service you choose to the controller  headers: {    'Content-Type': 'application/x-www-form-urlencoded' // Note the appropriate header  }}).then(function(response) { /* do something here */ });

See a more verbose Plunker demo

Example with $http.post()

$http.post(    'some/api/endpoint',    data: $httpParamSerializerJQLike($scope.appForm.data), // Make sure to inject the service you choose to the controller    {       headers: {         'Content-Type': 'application/x-www-form-urlencoded' // Note the appropriate header      }    }).then(function

How are $httpParamSerializerJQLike and $httpParamSerializer different

In general, it seems $httpParamSerializer uses less "traditional" url-encoding format than $httpParamSerializerJQLike when it comes to complex data structures.

For example (ignoring percent encoding of brackets):

• Encoding an array

{sites:['google', 'Facebook']} // Object with array propertysites[]=google&sites[]=facebook // Result with $httpParamSerializerJQLikesites=google&sites=facebook // Result with $httpParamSerializer

• Encoding an object

{address: {city: 'LA', country: 'USA'}} // Object with object propertyaddress[city]=LA&address[country]=USA // Result with $httpParamSerializerJQLikeaddress={"city": "LA", country: "USA"} // Result with $httpParamSerializer

All of these look like overkill (or don't work)... just do this:

$http.post(loginUrl, `username=${ encodeURIComponent(username) }` +                     `&password=${ encodeURIComponent(password) }` +                     '&grant_type=password').success(function (data) {