Complete Guide to Sending URL-Encoded Form Data with $http in AngularJS Without jQuery

Problem Background and Challenges

In AngularJS development, many developers are accustomed to using jQuery's $.param method for form data serialization. However, when needing to remove jQuery dependency, they encounter data format mismatch issues. AngularJS's $http service defaults to serializing data as JSON format, which differs from traditional form submission formats.

Analysis of $http Service Default Behavior

By default, the $http service transforms outgoing requests by serializing data as JSON and using application/json content type. This mechanism works well for most API calls but creates compatibility issues in scenarios requiring traditional form submission simulation.

transformRequest Solution

By configuring the transformRequest option, you can override the default serialization behavior. Here's a complete implementation example:

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

This implementation manually iterates through object properties, uses encodeURIComponent to encode keys and values, ensures proper handling of special characters, and ultimately generates standard URL-encoded strings.

Official Solutions in AngularJS 1.4+

Starting from AngularJS 1.4, the framework provides dedicated serialization services to simplify this process:

$httpParamSerializerJQLike Service

This service's serialization behavior is highly compatible with jQuery's $.param method and supports complex data structures:

// Inject service in controller
app.controller('MyController', ['$scope', '$http', '$httpParamSerializerJQLike', 
function($scope, $http, $httpParamSerializerJQLike) {
    
    $http({
        url: 'some/api/endpoint',
        method: 'POST',
        data: $httpParamSerializerJQLike({
            username: $scope.userName, 
            password: $scope.password
        }),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).then(function(response) {
        // Success callback
    });
}]);

$httpParamSerializer Service

This is the serializer used internally by AngularJS, with a more concise approach:

// Example using $httpParamSerializer
$http({
    method: 'POST',
    url: 'api/endpoint',
    data: $httpParamSerializer($scope.formData),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});

Serializer Differences Analysis

The two serializers exhibit different behaviors when handling complex data structures:

Array Serialization Comparison

// Original data
{sites: ['google', 'Facebook']}

// $httpParamSerializerJQLike result
sites[]=google&sites[]=facebook

// $httpParamSerializer result  
sites=google&sites=facebook

Object Serialization Comparison

// Original data
{address: {city: 'LA', country: 'USA'}}

// $httpParamSerializerJQLike result
address[city]=LA&address[country]=USA

// $httpParamSerializer result
address={"city": "LA", "country": "USA"}

Best Practices Recommendations

When choosing a serialization solution, consider the following factors:

Compatibility First: If the backend system expects jQuery-style parameter formats, using $httpParamSerializerJQLike ensures maximum compatibility.

Version Adaptation: For AngularJS 1.4+ projects, recommend using built-in serialization services; for older versions, adopt custom transformRequest solutions.

Error Handling: Regardless of the solution used, implement complete error handling mechanisms to ensure application stability.

Conclusion

By deeply understanding AngularJS's request processing mechanisms, developers can flexibly choose serialization solutions that suit project requirements. From custom transformRequest to official serialization services, AngularJS provides a complete toolchain to support various form submission scenarios, completely eliminating dependency on jQuery.