How can I post data as form data instead of a request payload?

Question

In the code below, the AngularJS $http method calls the URL, and submits the xsrf object as a "Request Payload" (as described in the Chrome debugger network tab). The jQuery $.ajax method does the same call, but submits xsrf as "Form Data".

How can I make AngularJS submit xsrf as form data instead of a request payload?

var url = 'http://somewhere.com/'; var xsrf = {fkey: 'xsrf key'};  $http({     method: 'POST',     url: url,     data: xsrf }).success(function () {});  $.ajax({     type: 'POST',     url: url,     data: xsrf,     dataType: 'json',     success: function() {} }); 

Answer 1

The following line needs to be added to the $http object that is passed:

headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} 

And the data passed should be converted to a URL-encoded string:

> $.param({fkey: "key"}) 'fkey=key' 

So you have something like:

$http({     method: 'POST',     url: url,     data: $.param({fkey: "key"}),     headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} }) 

From: https://groups.google.com/forum/#!msg/angular/5nAedJ1LyO0/4Vj_72EZcDsJ

UPDATE

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

• URL-encoding variables using only AngularJS services

Answer 2

If you do not want to use jQuery in the solution you could try this. Solution nabbed from here https://stackoverflow.com/a/1714899/1784301

$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: xsrf }).success(function () {});