Angularjs: form data

Tue, Mar 11, 2014

There are several possible ways to submit form data to a web server:

• urlencoded parameter string appended to the URL e.g ?param1=foo&param2=bar
• urlencoded parameter string contained in the body of the request, and header set to Content-Type: application/x-www-form-urlencoded
• multipart form data contained in the body of the request, and header set to Content-Type: multipart/form-data; boundary=...
• JSON encoded string contained in the body of the request, and header set to Content-Type: application/json;charset=utf-8

The last one is the method that AngularJS’s $http service uses by default when POSTing data payloads to the server. To override that you need to be a bit more explicit when calling $http e.g.

$http({
    url: "/signin",
    method: 'POST',
    data: encodeURIComponent("username="+username+"&password="+password),
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function () { console.log("Success"); }, 
         function () { console.log("Failure"); }
);

Note the use of the builtin Javascript function encodeURIComponent to encode the string.