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

Question

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 don't know what is actual problem but did you try this $http({method: 'post', url: URL, data: {username: $scope.userName, password: $scope.password}}); — Mritunjay
– Mritunjay, Commented Jul 12, 2014 at 7:06
Your first method should work, is $scope.userName defined? why didn't you try data: data? — user400654
– user400654, Commented Jul 12, 2014 at 7:12
@mritunjay: sorry.. I have made the edit.. I was trying the same. — Veer Shrivastav
– Veer Shrivastav, Commented Jul 12, 2014 at 7:37

Community · Accepted Answer · 2020-06-20 09:12:55Z

414

+50

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 25, 2014 at 21:19

allenhwkim

27.8k18 gold badges93 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Dejell Over a year ago

what if I need to submit multipart/form-data?

Vicary Over a year ago

As long as angular embeds jqLite under angular.element, you can simply return angular.element.param(obj);

Alex Pavlov Over a year ago

@Vicary Keep in mind that param() is not implemented in jqLite - code.angularjs.org/1.3.14/docs/api/ng/function/angular.element

test30 Over a year ago

this is another way to go

var obj = {a: 1, b: 2}; Object.keys(obj).reduce(function(p, c) {                         return p.concat([encodeURIComponent(c) + "=" + encodeURIComponent(obj[c])]);                     }, []).join('&');

Tomer Over a year ago

While this answer works and seems correct, it was written in 2014 and is now outdated. From Angular 1.4 there is a built in way to do it by using $httpParamSerializer. Check the answers below for an explanation and an example.

|

Boaz · Accepted Answer · 2021-05-06 16:39:28Z

140

URL-encoding variables using only AngularJS services

With AngularJS 1.4 and up, two services can handle the process of url-encoding data for POST requests, eliminating the need to manipulate the data with transformRequest or using external dependencies like jQuery:

$httpParamSerializerJQLike - a serializer inspired by jQuery's .param() (recommended)
$httpParamSerializer - a serializer used by Angular itself for GET requests

Example with $http()

$http({
  url: 'some/api/endpoint',
  method: 'POST',
  data: $httpParamSerializerJQLike($scope.appForm.data), // Make sure to inject the service you choose to the controller
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded' // Note the appropriate header
  }
}).then(function(response) { /* do something here */ });

See a more verbose Plunker demo

Example with $http.post()

$http.post(
    'some/api/endpoint',
    data: $httpParamSerializerJQLike($scope.appForm.data), // Make sure to inject the service you choose to the controller
    {
       headers: {
         'Content-Type': 'application/x-www-form-urlencoded' // Note the appropriate header
      }
    }
).then(function

How are `$httpParamSerializerJQLike` and `$httpParamSerializer` different

In general, it seems $httpParamSerializer uses less "traditional" url-encoding format than $httpParamSerializerJQLike when it comes to complex data structures.

For example (ignoring percent encoding of brackets):

• Encoding an array

{sites:['google', 'Facebook']} // Object with array property

sites[]=google&sites[]=facebook // Result with $httpParamSerializerJQLike

sites=google&sites=facebook // Result with $httpParamSerializer

• Encoding an object

{address: {city: 'LA', country: 'USA'}} // Object with object property

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

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

edited May 6, 2021 at 16:39

answered Jun 21, 2015 at 23:11

Boaz

20.3k9 gold badges68 silver badges74 bronze badges

10 Comments

stilllife Over a year ago

How can we use this on $resource inside a factory ?

Carlos Granados Over a year ago

Should be $http.({... instead of` $http.post({...

Boaz Over a year ago

@CarlosGranados Thanks for noticing. Corrected this typo here and in the Plunker demo.

zero298 Over a year ago

This worked perfectly after migrating from jQuery to AngularJS

Marty Chang Over a year ago

This is the AngularJS-specific answer I was looking for. I wish the poster would select this as the best answer.

|

Serj Sagan · Accepted Answer · 2020-06-25 01:35:09Z

61

All of these look like overkill (or don't work)... just do this:

$http.post(loginUrl, `username=${ encodeURIComponent(username) }` +
                     `&password=${ encodeURIComponent(password) }` +
                     '&grant_type=password'
).success(function (data) {

edited Jun 25, 2020 at 1:35

answered Mar 24, 2015 at 9:16

Serj Sagan

30.6k17 gold badges159 silver badges190 bronze badges

4 Comments

jlewkovich Over a year ago

Finally some common sense

Phil Over a year ago

Won't this send the request with the wrong content-type header?

Serj Sagan Over a year ago

It worked for me... not sure what the header was, but the request worked and it allowed to successfully authenticate. Why don't you test it out and let us know.

Peter Horsley Over a year ago

@Phil I guess it might depend on the server, I got bad request, until i added { headers: {'Content-Type': 'application/x-www-form-urlencoded'} } as the config arg, or supply use the $http(config) constructor like moices' answer shows. Either way this is superior to the accepted answer since it does not introduce some magic transformation and does not require the user of some auxillary service. Thanks!

moices · Accepted Answer · 2015-09-04 16:39:44Z

23

The problem is the JSON string format, You can use a simple URL string in data:

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: 'username='+$scope.userName+'&password='+$scope.password
}).success(function () {});

answered Sep 4, 2015 at 16:39

moices

2392 silver badges2 bronze badges

2 Comments

Ivan Hušnjak Over a year ago

you have to use encodeURIComponent($scope.userName) to url encode the data or your parameters will get corrupted if user enters value like "&myCustomParam=1"

xenteros Over a year ago

this is the only answer that has worked for me! I skipped success, but $http format is good

Mahieddine M. Ichir · Accepted Answer · 2017-06-11 16:58:15Z

Here is the way it should be (and please no backend changes ... certainly not ... if your front stack does not support application/x-www-form-urlencoded, then throw it away ... hopefully AngularJS does !

$http({
     method: 'POST',
     url: 'api_endpoint',
     headers: {'Content-Type': 'application/x-www-form-urlencoded'},
     data: 'username='+$scope.username+'&password='+$scope.password
 }).then(function(response) {
    // on success
 }, function(response) {
    // on error
 });

Works like a charm with AngularJS 1.5

People, let give u some advice:

use promises .then(success, error) when dealing with $http, forget about .sucess and .error callbacks (as they are being deprecated)
From the angularjs site here "You can no longer use the JSON_CALLBACK string as a placeholder for specifying where the callback parameter value should go."

If your data model is more complex that just a username and a password, you can still do that (as suggested above)

$http({
     method: 'POST',
     url: 'api_endpoint',
     headers: {'Content-Type': 'application/x-www-form-urlencoded'},
     data: json_formatted_data,
     transformRequest: function(data, headers) {
          return transform_json_to_urlcoded(data); // iterate over fields and chain key=value separated with &, using encodeURIComponent javascript function
     }
}).then(function(response) {
  // on succes
}, function(response) {
  // on error
});

Document for the encodeURIComponent can be found here

V31 · Accepted Answer · 2014-07-15 07:35:11Z

3

If it is a form try changing the header to:

headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";

and if it is not a form and a simple json then try this header:

headers[ "Content-type" ] = "application/json";

answered Jul 15, 2014 at 7:35

V31

7,6643 gold badges28 silver badges44 bronze badges

4 Comments

Veer Shrivastav Over a year ago

Not receiving anything. I still received blank $_POST array.!

V31 Over a year ago

is this $http call in your controller?

V31 Over a year ago

one more thing is your server end php?

V31 Over a year ago

I have found a solution for the same are you still getting the problem @Veer?

Srinath Mandava · Accepted Answer · 2014-07-12 07:17:17Z

2

From the $http docs this should work..

  $http.post(url, data,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
    .success(function(response) {
         // your code...
     });

edited Jul 12, 2014 at 7:17

answered Jul 12, 2014 at 7:05

Srinath Mandava

3,4722 gold badges27 silver badges37 bronze badges

4 Comments

Srinath Mandava Over a year ago

@Kevin i am not sure about this but..once when i tried sending a string it showed me an error

Srinath Mandava Over a year ago

@KevinB Fine..I got it..i think headers are needed to be changed while sending a string..stackoverflow.com/a/20276775/2466168

Boaz Over a year ago

Note that sending the correct headers would not affect the data which will still need to be urlencoded, one way or another.

wendellmva Over a year ago

data is still sent in json you must encode the data into x-www-form-urlencoded just adding a header is not enough

user8483090 · Accepted Answer · 2017-08-18 10:13:41Z

2

$http({

    method: "POST",
    url: "/server.php",
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    data: "name='Олег'&age='28'",


}).success(function(data, status) {
    console.log(data);
    console.log(status);
});

answered Aug 18, 2017 at 10:13

user8483090

211 bronze badge

1 Comment

abpatil Over a year ago

Code only answers aren't useful for the community. Please look at How to Answer

harishr · Accepted Answer · 2014-07-27 09:28:33Z

1

you need to post plain javascript object, nothing else

           var request = $http({
                method: "post",
                url: "process.cfm",
                transformRequest: transformRequestAsFormPost,
                data: { id: 4, name: "Kim" }
            });

            request.success(
                function( data ) {
                    $scope.localData = data;
                }
            );

if you have php as back-end then you will need to do some more modification.. checkout this link for fixing php server side

answered Jul 27, 2014 at 9:28

harishr

18.1k9 gold badges84 silver badges131 bronze badges

2 Comments

ppetermann Over a year ago

thats exactly NOT what he asked for, he specifically asked how he can get them as x-www-form-urlencoded, because he is running into issues with json stuff posted.

harishr Over a year ago

@ppetermann have you checked the edit history of the question before downvoting..

vanval · Accepted Answer · 2017-03-24 13:27:07Z

1

Though a late answer, I found angular UrlSearchParams worked very well for me, it takes care of the encoding of parameters as well.

let params = new URLSearchParams();
params.set("abc", "def");

let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded'});
let options = new RequestOptions({ headers: headers, withCredentials: true });
this.http
.post(UrlUtil.getOptionSubmitUrl(parentSubcatId), params, options)
.catch();

answered Mar 24, 2017 at 13:27

vanval

1,0271 gold badge12 silver badges20 bronze badges

Comments

RN Kushwaha · Accepted Answer · 2015-02-28 07:34:42Z

This worked for me. I use angular for front-end and laravel php for back-end. In my project, angular web sends json data to laravel back-end.

This is my angular controller.

var angularJsApp= angular.module('angularJsApp',[]);
angularJsApp.controller('MainCtrl', function ($scope ,$http) {

    $scope.userName ="Victoria";
    $scope.password ="password"


       $http({
            method :'POST',
            url:'http://api.mywebsite.com.localhost/httpTest?callback=JSON_CALLBACK',
            data: { username :  $scope.userName , password: $scope.password},
            headers: {'Content-Type': 'application/json'}
        }).success(function (data, status, headers, config) {
            console.log('status',status);
            console.log('data',status);
            console.log('headers',status);
        });

});

This is my php back-end laravel controller.

public function httpTest(){
        if (Input::has('username')) {
            $user =Input::all();
            return  Response::json($user)->setCallback(Input::get('callback'));
        }
    }

This is my laravel routing

Route::post('httpTest','HttpTestController@httpTest');

The result in browser is

status 200
data JSON_CALLBACK({"username":"Victoria","password":"password","callback":"JSON_CALLBACK"}); httpTesting.js:18 headers function (c){a||(a=sc(b));return c?a[K(c)]||null:a}

There is chrome extension called postman. You can use to test your back-end url whether it is working or not. https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en

hopefully, my answer will help you.

Collectives™ on Stack Overflow

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

11 Answers 11

UPDATE

11 Comments

URL-encoding variables using only AngularJS services

See a more verbose Plunker demo

How are `$httpParamSerializerJQLike` and `$httpParamSerializer` different

10 Comments

4 Comments

2 Comments

Comments

4 Comments

4 Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

UPDATE

11 Comments

URL-encoding variables using only AngularJS services

How are $httpParamSerializerJQLike and $httpParamSerializer different

10 Comments

4 Comments

2 Comments

Comments

4 Comments

4 Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

How are `$httpParamSerializerJQLike` and `$httpParamSerializer` different