How do I POST urlencoded form data with http without jQuery

Navigating the intricacies of web development often requires sending data to a server in specific formats. One common requirement is to POST urlencoded form data with $http without jQuery, a task that might seem daunting if you’re accustomed to jQuery’s simplicity or are new to AngularJS’s $http service. This method is crucial when integrating with traditional backend systems or APIs that expect data in the application/x-www-form-urlencoded format, mimicking how a standard HTML form submits data. Understanding how to properly configure your $http requests in AngularJS ensures seamless communication between your frontend application and the server, avoiding common data parsing errors and enhancing the robustness of your web applications. This guide will demystify the process, providing a clear, step-by-step approach to handle this essential data transmission without relying on external libraries like jQuery.

Understanding application/x-www-form-urlencoded

The application/x-www-form-urlencoded content type is a standard way to send data from web forms to servers. When a user submits an HTML form with the default encoding, the browser takes all the form fields and their values, encodes them, and then concatenates them into a single string. This string typically looks like key1=value1&key2=value2, where spaces are replaced by plus signs (+) and special characters are percent-encoded. This format is widely supported by web servers and backend frameworks, making it a fundamental aspect of web communication.

Unlike JSON, which is often preferred for modern RESTful APIs due to its readability and flexibility, application/x-www-form-urlencoded serves as a reliable fallback or primary method for older systems or specific API requirements. For instance, many legacy APIs, or even modern OAuth token endpoints, strictly expect this format. Failing to send data in the expected format often results in the backend server being unable to parse the request body, leading to errors like “400 Bad Request” or unexpected behavior. Properly structuring your data before sending it is paramount for successful backend integration.

A key difference when working with AngularJS’s $http service is its default behavior. By default, $http sends POST requests with a Content-Type header of application/json, and it automatically serializes JavaScript objects into JSON strings. This is highly convenient for JSON-based APIs but poses a challenge when application/x-www-form-urlencoded is required. Developers must explicitly instruct $http to modify this default behavior, which involves configuring how the request data is transformed before it is sent over the network. This explicit configuration is what we will focus on to achieve the desired form data posting.

The AngularJS $http Service and transformRequest

AngularJS’s built-in $http service is a powerful tool for making AJAX requests, encapsulating the functionality of the browser’s XMLHttpRequest object. It provides a higher-level API, simplifying common tasks like setting headers, handling success and error callbacks, and transforming data. For a POST request, you would typically use $http.post(url, data, config), where data is the JavaScript object you want to send. As mentioned, $http’s default behavior is to convert this data object into a JSON string and set the Content-Type header to application/json.

To override this default and send application/x-www-form-urlencoded data, we need to leverage the transformRequest configuration option. The transformRequest property in the $http config object accepts an array of functions or a single function. These functions are executed sequentially on the request data before it is sent to the server. By providing a custom transformRequest function, we can manually serialize our JavaScript object into the URL-encoded string format and then set the appropriate Content-Type header.

This approach gives developers granular control over the request payload. According to the AngularJS documentation, transformRequest functions receive the data and headers as arguments, allowing for dynamic manipulation. This flexibility is what makes $http so robust, enabling it to adapt to various API specifications, not just the default JSON format. While it requires a bit more setup than a simple JSON POST, understanding and implementing transformRequest for URL-encoded data is a fundamental skill for any developer working with AngularJS and diverse backend environments.

Infographic: POSTing URL-Encoded Data with $http

Implementing POST with transformRequest for URL-Encoded Data ------------------------------------------------------------

To successfully POST urlencoded form data with $http without jQuery, the core strategy involves two main steps: transforming your JavaScript object into a URL-encoded string and setting the correct Content-Type header. This is achieved by customising the config object passed to the $http.post method. Below, we outline the precise steps and code example for this implementation.

Step-by-Step Implementation

Define Your Data Object: Start with a plain JavaScript object containing the key-value pairs you wish to send.
Create a param Function: This utility function will convert your object into a URL-encoded string. Many developers create a small helper function for this common task.
Configure the $http Request: Set the transformRequest property to an array containing your serialization function and specify the Content-Type header.

Consider the following code snippet demonstrating how to implement this:

angular.module('myApp', []) .controller('MyController', ['$http', function($http) { var vm = this; vm.formData = { username: 'john.doe', email: 'john.doe@example.com', _token: 'someCsrfToken' }; // Helper function to serialize data function transformToUrlEncoded(obj) { var str = []; for (var p in obj) { if (obj.hasOwnProperty(p)) { str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); } } return str.join("&"); } vm.submitForm = function() { $http.post('/api/submit-form', vm.formData, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, transformRequest: [function(data) { return angular.isObject(data) && String(data) !== '[object File]' ? transformToUrlEncoded(data) : data; }] }) .then(function(response) { console.log('Success:', response.data); // Handle successful response }) .catch(function(error) { console.error('Error:', error); // Handle error }); }; }]);

This example clearly shows how transformRequest is used to intercept the data object, apply the transformToUrlEncoded function, and then send it with the correct header. This pattern is robust and ensures compatibility with backends expecting form-encoded data. It also allows for more advanced serialization logic if your data requires it, such as handling nested objects or arrays differently. For further reading on URL encoding standards, refer to MDN Web Docs on URL-encoded form data.

Handling Server-Side Parsing and Common Pitfalls

Once you’ve successfully configured your AngularJS $http request to send application/x-www-form-urlencoded data, the next critical step is ensuring your backend server can correctly parse and interpret this incoming data. Many server-side frameworks, such as Node.js with Express, Python with Flask/Django, or PHP, have built-in middleware or functions to handle this content type. However, proper configuration on the server is just as important as on the client. For instance, in an Express application, you’d typically use app.use(express.urlencoded({ extended: true })) to enable parsing of URL-encoded bodies. Without this Question & Answer :

I am new to AngularJS, and for a start, I thought to develop a new application using only AngularJS.

I am trying to make an AJAX call to the server side, using $http from my Angular App.

For sending the parameters, I tried the following:

$http({ method: "post", url: URL, headers: {'Content-Type': 'application/x-www-form-urlencoded'}, data: $.param({username: $scope.userName, password: $scope.password}) }).success(function(result){ console.log(result); });

This is working, but it is using jQuery as well at $.param. For removing the dependency on jQuery, I tried:

data: {username: $scope.userName, password: $scope.password}

but this seemed to fail. Then I tried params:

params: {username: $scope.userName, password: $scope.password}

but this also seemed to fail. Then I tried JSON.stringify:

data: JSON.stringify({username: $scope.userName, password: $scope.password})

I found these possible answers to my quest, but was unsuccessful. Am I doing something wrong? I am sure, AngularJS would provide this functionality, but how?

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 by serializing the data as JSON and then posting it with the content- type, “application/json”. When we want to post the value as a FORM post, we need to change the serialization algorithm and post the data with 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