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

javascript

http

angularjs

serialization

byNikita Barsukov·Feb 13, 2025

For POST request with urlencoded data, use $http in Angular. Set the headers to 'Content-Type': 'application/x-www-form-urlencoded' and encode the data utilizing a custom function as jQuery is not involved.

$http({
  method: 'POST',
  url: 'your-api-endpoint',
  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  data: Object.keys(postData).map(key =>
    encodeURIComponent(key) + '=' + encodeURIComponent(postData[key])
  ).join('&')
    // 'Cause who needs jQuery, amirite?!
}).then(successCallback, errorCallback);

The postData should be an object containing your form keys and values. Use the native JavaScript methods Object.keys, encodeURIComponent, and Array.prototype.map to serialize data.

Walking through $http and urlencoded data

To post urlencoded form data with $http, we custom-tailor a serialization algorithm. By default, $http serializes data into JSON, which isn't what we're after. We circumnavigate this by adjusting the headers and employing a transformRequest function.

The magic of `transformRequest`

The transformRequest function provides us the ability to massage our data before $.post sends it out the door. In our case, we have to transform our JSON object to a string which aligns with the application/x-www-form-urlencoded content type - crucial for servers looking for this specific data.

Harnessing $http’s features

Here's how transformRequest can be harnessed within AngularJS:

function transformUrlEncoded(obj) {
  var str = [];
  for (var p in obj) {
    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
  }
  return str.join("&");
}

$http({
  method: 'POST',
  url: 'your-api-endpoint',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded' // No more JSON-nonsense I solemnly swear!
  },
  transformRequest: transformUrlEncoded, // This is where the magic happens
  data: postData
}).then(function(response) {
  console.log(response.data); // Your code, your rules!
}, function(error) {
  console.error(error); // Uh-oh, spaghetti-o's!
});

By setting up a Content-Type header and furnishing a transformRequest function, we've neatly tuned our $http call to handle urlencoded form data.

Tackling complex data structures

Our tool for dealing with more layered data structures is $httpParamSerializerJQLike. A service available since version 1.4, it emulates param serialization a la jQuery and is super handy for nested objects or arrays.

app.config(function($httpProvider) {
  $httpProvider.defaults.transformRequest.unshift($httpParamSerializerJQLike); // To the frontlines!
});

$http.post('your-api-endpoint', complexData); // Easy-peasy!

Understanding that $http.post() is essentially a shortcut for $http configured with the POST method, finetuning $http configuration in accordance to data requirements becomes paramount.

Collaborating with $http in a dynamic application

In a lively application reliant on dynamically generated data, ensuring $http calls seamlessly interact with these data sources is key.

Synching with scope data

Should you be working with a form needing to ship out user-submitted data, $scope is your ticket:

$scope.formData = {}; // Gateway to world domination!

// User fills the form, alterng $scope.formData
// Follow this up by submission:
$http.post('your-api-endpoint', $scope.formData); // Easy as 1, 2, 3!

Managing asynchronous responses

$http's built-in promise functionality helps handle asynchronous responses, allowing simple and compact error handling mechanisms:

$http.post('your-api-endpoint', $scope.formData)
  .then(function success(response) { // Success smells sweet!
    console.log('Success:', response);
  }, function error(response) { // Failures are the pillars of success!
    console.error('Error:', response);
  });