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, Jul 12 '14 at 07:06
Your first method should work, is `$scope.userName` defined? why didn't you try `data: data`? — Kevin B, Jul 12 '14 at 07:12
@mritunjay: sorry.. I have made the edit.. I was trying the same. — Veer Shrivastav, Jul 12 '14 at 07:37
@V31: It din't work.. stil facing the issue.. can you help.. — Veer Shrivastav, Jul 12 '14 at 12:43
@V31: yaa I am sending a form.. not exactly a form.. but some text-fields and passwords.. — Veer Shrivastav, Jul 14 '14 at 04:35

score 414 · Accepted Answer · edited Jun 20 '20 at 09:12

414

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 '20 at 09:12

Community

1
1

answered Jul 25 '14 at 21:19

allenhwkim

27,270
18
89
122

1

what if I need to submit multipart/form-data? – Dejell Jan 13 '15 at 07:57
2

As long as angular embeds jqLite under `angular.element`, you can simply `return angular.element.param(obj);` – Vicary Jan 26 '15 at 15:43
4

@Vicary Keep in mind that param() is not implemented in jqLite - https://code.angularjs.org/1.3.14/docs/api/ng/function/angular.element – Alex Pavlov Mar 25 '15 at 00:35
@AlexPavlov Since which version? I was already using it for quite a while now. – Vicary Mar 25 '15 at 00:38
@Vicary I think param() was never available in jqLite. Most likely you have a real jQuery pulled through dependencies of some 3rd party library etc, that's why it works for you. Anyway, the link I posted provides a complete official list of supported functions. – Alex Pavlov Mar 25 '15 at 01:07
Yes you're right, as long as jQuery is loaded before Angular, `angular.element` will point to it. Since angularjs.org itself requires jQuery, people can miss this easily. – Vicary Mar 25 '15 at 01:17
that make sense use transformRequest to remove JSON style – Vasyl Sep 10 '15 at 08:20
yes, you need to transform the json into form value format – Kerisnarendra Sep 01 '16 at 06:28
1

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('&');``` – test30 Sep 14 '16 at 22:09
1

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. – Tomer Jan 06 '17 at 00:41
@Tomer I can't inject $httpParamSerializerJQLike nor $httpParamSerializer, the way it was described here https://stackoverflow.com/a/30970229/340142 . I am using AngularJS 1.6.6. Every time I inject it into controller I get `undefined` or `$http function` :( So I choose this resolution because it just works! – Marecky Nov 27 '17 at 22:39

Boaz · Answer 2 · 2021-05-06T16:39:28.600

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 06 '21 at 16:39

answered Jun 21 '15 at 23:11

Boaz

19,892
8
62
70

How can we use this on $resource inside a factory ? – stilllife Oct 09 '15 at 10:17
2

Should be `$http.({...` instead of` `$http.post({...` – Carlos Granados Nov 07 '15 at 14:30
@CarlosGranados Thanks for noticing. Corrected this typo here and in the Plunker demo. – Boaz Nov 07 '15 at 16:15
This worked perfectly after migrating from jQuery to AngularJS – zero298 Feb 18 '16 at 22:47
4

This is the AngularJS-specific answer I was looking for. I wish the poster would select this as the best answer. – Marty Chang May 01 '16 at 04:08
I can't inject $httpParamSerializerJQLike nor $httpParamSerializer, I am using AngularJS 1.6.6. Every time I inject it into controller I get `undefined` or `$http function` :( – Marecky Nov 27 '17 at 22:22
@Marecky How are you injecting? The Angular 1.6 documentation does not suggest it has changed: https://docs.angularjs.org/api/ng/service/$httpParamSerializerJQLike – Boaz Nov 27 '17 at 23:40
@Boaz, Its in TypeScript, I inject it similar like this https://github.com/gitowiec/ciklum-homework/blob/4e3d615d9ddd0e83373ed68fe864934b10c82c34/src/app/core/connector/connector.service.ts#L25 , but with `constructor(protected $httpParamSerializerJQLike, protected $http: angular.IHttpService, protected $q: angular.IQService, protected $timeout: angular.ITimeoutService)` – Marecky Nov 28 '17 at 23:46
Does this work with `$http.post()`, too? I tried, but it did not work. With `$http()` and `method` set to `POST`, however, everything is fine. – user1438038 May 06 '21 at 14:42
@user1438038 `$http.post()` is a shorthand method with a slightly different signature. Added an example with the arguments signature of `$http.post()` that should work similiarly. – Boaz May 06 '21 at 16:40

Serj Sagan · Answer 3 · 2020-06-25T01:35:09.330

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 '20 at 01:35

answered Mar 24 '15 at 09:16

Serj Sagan

28,927
17
154
183

11

Finally some common sense – jlewkovich Jul 28 '15 at 17:53
Won't this send the request with the wrong content-type header? – Phil Jul 22 '16 at 05:24
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. – Serj Sagan Jul 23 '16 at 06:51
5

@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! – Mr. Bungle Nov 17 '16 at 20:05

score 23 · Answer 4 · answered Sep 04 '15 at 16:39

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 04 '15 at 16:39

moices

239
2
2

7

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"` – Ivan Hušnjak Sep 09 '15 at 18:28
2

this is the only answer that has worked for me! I skipped success, but $http format is good – xenteros Jul 19 '16 at 11:38

score 4 · Answer 5 · answered Jun 11 '17 at 16:58

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

score 3 · Answer 6 · answered Jul 15 '14 at 07:35

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 '14 at 07:35

V31

7,626
3
26
44

Not receiving anything. I still received blank `$_POST` array.! – Veer Shrivastav Jul 20 '14 at 11:36
is this $http call in your controller? – V31 Jul 25 '14 at 17:36
one more thing is your server end php? – V31 Jul 25 '14 at 18:07
I have found a solution for the same are you still getting the problem @Veer? – V31 Jul 29 '14 at 05:20

Srinath Mandava · Answer 7 · 2014-07-12T07:17:17.293

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 '14 at 07:17

answered Jul 12 '14 at 07:05

Srinath Mandava

3,384
2
24
37

@Kevin i am not sure about this but..once when i tried sending a string it showed me an error – Srinath Mandava Jul 12 '14 at 07:10
@KevinB Fine..I got it..i think headers are needed to be changed while sending a string..http://stackoverflow.com/a/20276775/2466168 – Srinath Mandava Jul 12 '14 at 07:20
1

Note that sending the correct `headers` would not affect the `data` which will still need to be urlencoded, one way or another. – Boaz Sep 01 '15 at 08:55
data is still sent in json you must encode the data into x-www-form-urlencoded just adding a header is not enough – wendellmva Feb 28 '16 at 16:10

score 2 · Answer 8 · answered Aug 18 '17 at 10:13

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 '17 at 10:13

user8483090

21
1

4

Code only answers aren't useful for the community. Please look at [How to Answer](http://stackoverflow.com/questions/how-to-answer) – abpatil Aug 18 '17 at 10:17

score 1 · Answer 9 · answered Jul 27 '14 at 09:28

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 '14 at 09:28

harishr

17,807
9
78
125

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. – ppetermann Jan 16 '15 at 16:23
@ppetermann have you checked the edit history of the question before downvoting.. – harishr Jan 20 '15 at 13:07

score 1 · Answer 10 · answered Mar 24 '17 at 13:27

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();

score 0 · Answer 11 · edited Feb 28 '15 at 07:34

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.

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

11 Answers11

UPDATE

URL-encoding variables using only AngularJS services

See a more verbose Plunker demo

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

Linked

Related

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

11 Answers11

UPDATE

URL-encoding variables using only AngularJS services

See a more verbose Plunker demo

How are $httpParamSerializerJQLike and $httpParamSerializer different

Linked

Related

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